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