Fancybox — выводим карту в модальном окне — API Яндекс.Карт 2.х

В свое время я на страницах блога писал о том, как вывести Яндекс.Карту в модальном окне, используя плагин FancyBox для javascript-библиотеки jQuery., смотрите заметку.

В этот раз я хочу рассказать, как тоже самое можно сделать, используя API Яндекс.Карт 2.х и плагина FancyBox v2.

Для начала нам необходимо скачать архив с плагином с его сайта или подключить.

Для его использования нам также будет необходима сама библиотека jQuery, подключим ее из хранилища библиотек Яндекса строкой кода:

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

Далее подключаем сам плагин FancyBox и стили для него:

<script type="text/javascript" src="source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.0.6" media="screen" />

После этого, подключаем API Яндекс.Карт 2.х:

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>

Теперь рассмотрим первый пример использования, когда центр карты и метка заданы значениями координат.

При загрузки страницы мы видим ссылку «Расположение на карте», при клике по которой появляется всплывающее окно с картой и меткой.

Яндекс.Карта в модальном окне с меткой

Кликаем по метке и открывается балун с информацией.

Яндекс.Карта в модальном окне с открытым балуном

Посмотреть пример в действии

Рассмотрим код примера.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример Яндекс.Карта в модальном окне fancybox</title>
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.0.6" media="screen" /> 	
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
 
<script type="text/javascript">
ymaps.ready(function  () {
 
var myMap;
 
	$('.fancybox').fancybox({height:600,afterShow : function() {
 
		myMap = new ymaps.Map('inline1', {
                    center: [56.3241,44.0014],
                    zoom: 15,
					behaviors: ["scrollZoom","drag"]
                });	
 
	var myPlacemark = new ymaps.Placemark([56.3241,44.0014], {
                    // Свойства
                    iconContent: 'Нижегородский театр драмы',
                    balloonContentHeader: '<strong>Нижегородский государственный академический театр драмы имени М. Горького</strong>',
                    balloonContentBody: 'ул. Большая Покровская, д. 13',
                    balloonContentFooter: 'Сайт: <a rel="nofollow" href="http://www.drama.nnov.ru/" target="_blank">http://www.drama.nnov.ru</a>'
                }, {
                    // Опции
                    preset: 'twirl#redStretchyIcon',
					balloonMaxWidth: 250
                });
 
            // Добавляем метку на карту
            myMap.geoObjects.add(myPlacemark);			
 
	}, afterClose:function (){
	    myMap.destroy();		
		myMap = null;
	}});
});
</script>
</head>
 
<body>
<p><strong>Нижегородский государственный академический театр драмы имени М. Горького</strong></p>
<p>Адрес: г. Нижний Новгород, ул. Большая Покровская, д. 13</p>
<p><a class="fancybox" href="#inline1">Расположение на карте</a></p>
<p>Сайт:   <a rel="nofollow" href="http://www.drama.nnov.ru/" target="_blank">http://www.drama.nnov.ru</a></p>
<div id="inline1" style="width:700px; height:600px; display: none;"></div>
</body>
</html>

В разделе BODY мы создаем ссылку, при щелчке по которой будет отображаться контейнер с картой.

<p><a class="fancybox" href="#inline1">Расположение на карте</a></p>

Код области для отображения карты:

<div id="inline1" style="width:700px; height:600px; display: none;"></div>

Эта область изначальна скрыта, т. к. имеет CSS-свойство display: none.

Кликом по ссылке вызывается плагин FancyBox, в обработчике которого создается Яндекс.Карта с меткой, а после закрытия окна карта уничтожается.

Рассмотрим другой вариант, когда центр карты задается строкой адреса с последующем геокодированием.

Яндекс.Карта в модальном окне с балуном

Посмотреть пример в действии

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример Яндекс.Карта в модальном окне fancybox с геокодированием адреса</title>
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.0.6" media="screen" /> 	
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
 
<script type="text/javascript">
ymaps.ready(function  () {
 
	$('.fancybox').fancybox({height:600,afterShow : function() {
 
		ymaps.geocode('Нижнего Новгород, ул. Большая Покровская, д. 13', { results: 1 }).then(function (res) {
			// Выбираем первый результат геокодирования
			window.firstGeoObject = res.geoObjects.get(0);
			var points = window.firstGeoObject.geometry.getCoordinates();
			window.myMap = new ymaps.Map("inline1", {
				center: points,
				zoom: 17,
				behaviors: ["scrollZoom","drag"]
			});
 
		myMap.balloon.open(
                // Позиция балуна
                points, {
                    // Свойства балуна
                    contentBody: '<strong>Нижегородский театр драмы<br>имени М. Горького</strong>'
                }, {                    
                    closeButton: false
                });	
 
 
		}, function (err) {
			// Если геокодирование не удалось,
			// сообщаем об ошибке
			console.log(err.message);
		});
	}, afterClose:function (){
		window.myMap.destroy();
		myMap = null;
	}});
});
</script>
</head>
 
<body>
<p><strong>Нижегородский государственный академический театр драмы имени М. Горького</strong></p>
<p>Адрес: г. Нижний Новгород, ул. Большая Покровская, д. 13</p>
<p><a class="fancybox" href="#inline1">Расположение на карте</a></p>
<p>Сайт:   <a rel="nofollow" href="http://www.drama.nnov.ru/" target="_blank">http://www.drama.nnov.ru</a></p> 
<div id="inline1" style="width:700px; height:600px; display: none;"></div>
</body>
</html>

Загрузить архив с файлами примеров

  • Georgy: Подскажите, пожалуйста, как на карту добавить zoom? Делаю после myMap.geoObjects.add(myPlacemark); такую конструкцию: var zoom = new YMaps.Zoom(); //Добавление элемента управления на карту map.addControl(zoom); но почему то не срабатывает
  • Антон Шаманов: ошибка: "myMap.balloon.open(" должно быть "window.myMap.balloon.open("
  • Юра Романенко: Здравствуйте. Спасибо за реализацию,все работает. Подскажите пожалуйста, как подключить 2 карты на одной странице.
  • Александр: спасибо - все ОК, только как пользовательские элементы карты подключить? Маштабирование итд