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

Автор: | 12.04.2009

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

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

Для реализации мы возьмем уже готовый пример, который использовался нами в заметке:» Продолжаем работать с маркерами используя 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

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

Две Яндекс.Карты на одной странице - карта в балуне

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

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

  1. media.

    Респект за солюшн — я пытался объединить две карты с разных сайтов на одной странице и выдавал «Не првильный ключ». Теперь ясно почему!

    Спасиб

  2. Alwe

    СПС, еще минут 5 научного тыка и сам бы догадался. Нужно было аж 5 карт в разных модулях.

Добавить комментарий для Alwe Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *