Динамическое создание меток на Яндекс карте с использованием API

  • 10 Март 2016
  • 0

На сайте-каталоге ресторанов, нужно было реализовать для каждого ресторана всплывающее окно с картой Яндекс и меткой соответствующей адресу.

Для решения данной задачи я использовал следующий способ:

1) Создал разметку попапа и подключил к нему плагин EasyFancybox, так выглядела моя разметка footer-screenshot

2) Подключил API Яндекс карт в хедер сайта, перед закрывающим тегом </head> — <script src=»https://api-maps.yandex.ru/2.1/?lang=ru_RU» type=»text/javascript»></script>

3) Этот код вставил в файл script.js :

function map_init() {
map = new ymaps.Map(«map», {
center: [51.16476843, 71.43768940],
zoom: 11,
});
map.controls.remove(‘fullscreenControl’);
map.controls.remove(‘typeSelector’);
map.controls.remove(‘trafficControl’);
map.controls.remove(‘geolocationControl’);
map.controls.remove(‘searchControl’);
};

ymaps.ready(map_init);

Пояснения:

а) при загрузке страницы создается карта и размещается в блоке #map

б) выставляю координаты центра карты (в данном случае это город Астана)

в) отключаю все ненужные элементы управления

4) В разметке страницы для каждого ресторана есть ссылка Показать карту (с классом address), также есть блок с адресом этого ресторана (адрес вывел через дополнительное поле используя плагин ACF — блок с адресом имеет класс — map-address). Вот оставшийся JS код:

$(‘.address’).click(function() {
map.geoObjects.remove(window.placemark);

var addr = $(this).siblings(‘.map-address’).text();
var myGeocoder = ymaps.geocode(addr);

myGeocoder.then(
function (res) {
window.placemark = res.geoObjects;
map.geoObjects.add(placemark);
$.fancybox({ href: ‘#popup_map’ });
},
function (err) {
// Адрес не найден
}
);
})

Пояснения:

а) При нажатии на ссылку с классом address получаем сам адрес, который находиться в соседнем блоке с классом map-address

б) Используем функцию геокодирования для получения координат по адресу

в) Размещаем метку на карте и открываем попап

г) При повторном открытии попапа с картой, сначала удаляется текущая метка, а потом ставится новая.