Всплывающие окна с картами — оптимальный вариант в тех ситуациях, когда вебмастеру не хочется занимать лишнее место на страницах сайта. Небольшая инструкция, предполагающая, что на фрагмента будет метка объекта и краткое описание. Прежде всего, настраиваем API карт с помощью следующего кода:
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
Прописываем шаблон ссылки, как указано в примере:
<a href="#single-map" class="fan-map" data-x="58.519" data-y="31.258"data-title="точка2">точка2</a>
<div id="single-map" style="display:none">
<div id="map-title"></div>
<div id="map" style="width: 600px; height: 400px"></div>
</div>
Этот код уже задаёт параметры будущей карте. Можно настраивать на своё усмотрение, прописывать высоту и ширину в зависимости от особенностей сайта.
Следующий код предназначен для перемещения метки:
$('.fan-map').click(function () {
x = $(this).data('x'); // получаем данные из параметров ссылки
y = $(this).data('y');
$('#map-title').html($(this).data('title')); // ставим заголовок
console.log(coord); // тоже для отладки
map.geoObjects.remove(myPlacemark); // удаляем старую метку
myPlacemark = new ymaps.Placemark([x,y], { //создаем новую метку
hintContent: 'Место строительства', // в принципе эти параметры тоже можно добавить в ссылку
balloonContent: 'Место строительства'
});
map.geoObjects.add(myPlacemark); // устанавливаем метку на карту
});
$('.fan-map').fancybox(); //запускаем фансибокс
Зачем это нужно
Карта вставляется на сайт прежде всего для удобства пользователя: благодаря ей он может быстро прикинуть, где находится компания. Дополнительный виджет упростит жизнь потенциальному клиенту и улучшит общее впечатление о сайте и компании в целом.