В свое время я на страницах блога писал о том, как вывести Яндекс.Карту в модальном окне, используя плагин 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> |