Две карты Яндекса на одной странице

В этой заметке я хочу рассказать Вам о том, как можно использовать две карты Яндекса на одной странице.

Например, мы хотим, чтобы одновременно отображались обычная карта города и его спутниковый снимок.

Для реализации мы возьмем уже готовый пример, который использовался нами в заметке:" Продолжаем работать с маркерами используя API Яндекс.Карт".

Работающий пример находиться по адресу http://webmap-blog.ru/examples/ymap_pr_0.html

Мы возьмем и скопируем участок кода

map = new YMaps.Map( document.getElementById("YMapsID") );map.setCenter(new YMaps.GeoPoint(43.979459,56.291908), 15,YMaps.MapType.MAP);

map.addControl(new YMaps.TypeControl());

map.addControl(new YMaps.ToolBar());

map.addControl(new YMaps.Zoom());

map.addControl(new YMaps.MiniMap());

map.addControl(new YMaps.ScaleLine());



И вставим его перед закрывающейся фигурной скобкой.

Мы добавили код настроек для второй карты.

Затем в копии кода заменим обозначение map на map2 и  YMapsID на YMapsID2 .

Также заменим тип карты с YMaps.MapType.MAP на YMaps.MapType.SATELLITE.

В разделе body добавим следующий код

<br><div id="YMapsID2" style="height:400px; width:600px;"></div>



С начала мы добавили оператор перевода строки, а затем определяем область для отображения второй карты.

Загружаем пример в браузере и наблюдаем



Посмотреть пример в действии и полный код можно здесь.

Можно еще усложнить наш пример,  встроив вторую карту в балун первой.

С начала мы удалим несколько строк кода.

Удаляем строки map.addControl(new YMaps.MiniMap()); и map2.addControl(new YMaps.MiniMap()); - элемент управления обзорная карта.

Удаляем оставшиеся элементы управления у второй карты.

Строки

map2.addControl(new YMaps.TypeControl());map2.addControl(new YMaps.ToolBar());map2.addControl(new YMaps.Zoom());

map2.addControl(new YMaps.ScaleLine());



Строки с заданием метки для первой карты

var content = document.createElement('span');content.innerHTML = "Дворец спорта";map.openBalloon(new YMaps.GeoPoint(43.979459,56.291908), content);



Также удаляе строки из секции body

<br><div id="YMapsID2" style="height:400px; width:600px;"></div>



Затем добавляем ко второй карте элемент управления YMaps.SmallZoom строкой

map2.addControl(new YMaps.SmallZoom());

Перед определением второй карты добавляем строки для описания содержимого балуна.

var point = new YMaps.GeoPoint(43.979459,56.291908); - точка расположения метки и балуна

var placemark = new YMaps.Placemark(point); - определяем балун

placemark.setBalloonContent('<div style="text-align:center"><strong>Дворец спорта</strong><br><div id="YMapsID2" style="height:200px; width:300px;"></div><br>проспект Гагарина, д. 29</div>'); - содержимое балуна html-код с определением области второй карты.

map.addOverlay(placemark); - добавляем балун на карту

placemark.openBalloon(); - открываем балун

Снимок во второй карте имеет некоторое смещение по координатам относительно первой карты.

Для правельного центрирования изменим значение центра для второй карты и величину масштаба на 43.979288,56.291384 и 16 соответственно.

Увеличи размер окна первой карты height:600px и width:800px

Загружаем наш пример в браузере и наблюдаем результат.



Посмотреть пример в действии и полный код можно здесь.