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

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

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

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

Работающий пример находиться по адресу https://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

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

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