Может возникнуть ситуация, когда на сайте (каталог, интернет-магазин) возникает необходимость сделать множество ссылок, которые открывают карту с меткой. Но если делать на каждую ссылку по карте, то страница будет перегружена. Как же с этим бороться?

Для этого можно использовать фансибокс, api яндекс карт и небольшой скрипт.

Итак, у нас есть задача: нужна такая ссылка, которая будет показывать всплывающее окно с картой, в которой будет метка и описание объекта, при этом карта должна быть одна, а метка и описание – динамичным.
Считаем, что фансибокс уже подключен (последняя версия на момент создания статьи)
Для начала подключим 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>

Что мы видим в этом коде? А видим, что по ссылке будет вызываться блок single-map, в котором есть место для заголовка окна фансибокса и блок для карты. Т.е. карта на странице будет всегда, вызываться в окошке фансибокса. Так же у ссылки есть параметры: координаты и текст для заголовка. Всяко проще задать такую ссылку с параметрами, чем каждый раз генерировать карту и вставлять ее в текст.

Далее следует инициализировать, пока скрытую, карту.

/* map */
 /** init **/
 var map; // определяем необходимые переменные
 var Coll;
 var myPlacemark;
 var x=58.518;
 var y=31.258;
 var coord;
 function init() { // эта функция включает генерацию карты, нужно запустить ПОСЛЕ того, как загрузится апи карт
 map = new ymaps.Map("map", {
 center: [58.518,31.258],
 zoom: 10
 },
 {
 searchControlProvider: 'yandex#search'
 }); 
 
 // метка
 myPlacemark = new ymaps.Placemark([x, y], { 
 hintContent: 'Место строительства',
 balloonContent: 'Место строительства'
 });
 map.geoObjects.add(myPlacemark);
 map.events.add('click', function (e) { //просто выводим в консоль координаты клика - чисто для отладки
 var coords = e.get('coords');
 console.log(coords); 
 });
 }
 ymaps.ready(init); // запускаем функцию инициализации ПОСЛЕ того, как загрузится апи карт

Таким образом карта есть, точка стоит где то, не важно где.
По клику нам необходимо переместить метку, это делается таким образом:

$('.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(); //запускаем фансибокс

Таким нехитрым образом, если у нас есть каталог товаров можно либо сделать 1 поле текстовое, в которое будет вставляться ссылка по образцу, либо несколько полей и генерировать ее уже на месте – в зависимости от предполагаемой квалификации контент-менеджера и получить столько “карт” на странице – сколько нужно, при этом не нагружая страницу.