Иногда, при разработке картографических сервисов, возникает необходимость вывести Яндекс.Карту во всплывающем (модальном) окне.
В этой заметке я покажу как это сделать, используя плагин FancyBox для javascript-библиотеки jQuery.
Для примера мы создадим два файла, html-страницу со ссылками на карту и файл выводящий саму карту.
Код первого файла index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример Яндекс.Карта в модальном окне</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script src="http://api-maps.yandex.ru/1.1/?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a#example1").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example4").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$('#ymap1').fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$('#ymap2').fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$('#ymap3').fancybox();
$('#ymap4').fancybox();
})
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center"><a id="example1" rel="nofollow" href="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Nizhny_Novgorod_Drama_Theatre_2.jpg/800px-Nizhny_Novgorod_Drama_Theatre_2.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Nizhny_Novgorod_Drama_Theatre_2.jpg/300px-Nizhny_Novgorod_Drama_Theatre_2.jpg" width="250" alt="Нижегородский государственный академический театр драмы имени М. Горького" /></a></td>
<td><p><strong>Нижегородский государственный академический театр драмы имени М. Горького</strong></p>
<p>Адрес: <a href="map.php?address=г. Нижний Новгород, ул. Большая Покровская, д. 13" title="Нижегородский государственный академический театр драмы имени М. Горького" id="ymap1">г.Нижний Новгород, ул. Большая Покровская, д. 13</a></p>
<p>Сайт: <a rel="nofollow" href="http://www.drama.nnov.ru/" target="_blank">http://www.drama.nnov.ru</a></p></td>
</tr>
<tr>
<td align="center"><a id="example2" rel="nofollow" href="http://upload.wikimedia.org/wikipedia/commons/e/ed/Theater_%22Comedia%22.JPG"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Theater_%22Comedia%22.JPG/300px-Theater_%22Comedia%22.JPG" width="250" alt="Нижегородский театр Комедія" /></a></td>
<td><p><strong>Нижегородский театр «Комедія»</strong></p>
<p>Адрес: <a href="map.php?address=г. Нижний Новгород, ул. Грузинская, д. 23" title="Нижегородский театр «Комедія»" id="ymap2">г.Нижний Новгород, ул. Грузинская, д. 23</a></p>
<p>Сайт: <a rel="nofollow" href="http://comedia.nnov.ru/" target="_blank">http://comedia.nnov.ru</a></p></td>
</tr>
<tr>
<td align="center"><a id="example3" rel="nofollow" href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Opera_House_of_Nyzhny_Novgorod.jpg/800px-Opera_House_of_Nyzhny_Novgorod.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Opera_House_of_Nyzhny_Novgorod.jpg/250px-Opera_House_of_Nyzhny_Novgorod.jpg" width="250" height="188" alt="Нижегородский государственный академический театр оперы и балета имени А. С. Пушкина" /></a></td>
<td><p><strong>Нижегородский государственный академический театр оперы и балета имени А. С. Пушкина
</strong></p>
<p>Адрес: <a href="map.php?address=г. Нижний Новгород, ул. Белинского, д. 59" title="Нижегородский государственный академический театр оперы и балета имени А. С. Пушкина" id="ymap3">г.Нижний Новгород, ул. Белинского, д. 59</a></p>
<p>Сайт: <a rel="nofollow" href="http://www.opera.nnov.ru" target="_blank">http://www.opera.nnov.ru</a></p></td>
</td>
</tr>
<tr>
<td align="center"><a id="example4" rel="nofollow" href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Nizhny_Novgorod_theatre_of_young_audience.jpg/800px-Nizhny_Novgorod_theatre_of_young_audience.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Nizhny_Novgorod_theatre_of_young_audience.jpg/320px-Nizhny_Novgorod_theatre_of_young_audience.jpg" width="250" alt="Нижегородский государственный театр юного зрителя" /></a></td>
<td><p><strong>Нижегородский государственный театр юного зрителя</strong></p>
<p>Адрес: <a href="map.php?address=г. Нижний Новгород, ул. Горького, д.145" title="Нижегородский государственный театр юного зрителя" id="ymap4">г.Нижний Новгород, ул. Горького, д.145</a></p>
<p>Сайт: <a rel="nofollow" href="http://www.tyuz.ru" target="_blank">http://www.tyuz.ru</a></p></td>
</tr>
</table>
</body>
</html> |
В этом файле мы выводим информацию о театрах Нижнего Новгорода, при нажатии на ссылку с адресом появляется модальное окно с картой.
Если нажать на изображение театра, то также появляется модальное окно, но с увеличенным изображением.
В начале кода мы подключаем необходимые файлы библиотеки jQuery и плагинов FancyBox, Mousewheel с сервера Яндекса хостинга библиотек.
Это позволяет уменьшить скорость загрузки библиотек, а также нет необходимости в скачивании их на свой сайт.
После этого подключаем API Яндекс.Карт с ключом для Вашего сайта.
Рассмотрим ссылку для вызова окна с картой:
<a href="map.php?address=г. Нижний Новгород, ул. Большая Покровская, д. 13" title="Нижегородский государственный академический театр драмы имени М. Горького" id="ymap1">г.Нижний Новгород, ул. Большая Покровская, д. 13</a></p>
Здесь файлу map.php прередается методом GET адрес, а ссылка имеет id= "ymap1".
Для данной ссылки мы в разделе head обработчик с использованием плагина FancyBox
$(‘#ymap1’).fancybox({
‘overlayShow’ : false,
‘transitionIn’ : ‘elastic’,
‘transitionOut’ : ‘elastic’
});
Передаваемые параметры:
‘overlayShow’ : false — не использовать наложение,
‘transitionIn’ : ‘elastic’, — тип эффекта перехода (‘elastic’, ‘fade’ или ‘none’ )
‘transitionOut’ : ‘elastic’
Тут все просто и понятно
Рассмотрим теперь код файла map.php для вывода карты
Код файла:
<?php
if(isset($_GET['address'])) {$address = $_GET['address'];}
?>
<!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>На карте</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
window.setTimeout(function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.addControl(new YMaps.TypeControl());//Тип карты, кнопочки Схема, Гибрид, Спутник
map.addControl(new YMaps.ToolBar());//Тулбар, кнопки Рука, Лупа, Линейка
map.addControl(new YMaps.Zoom());
// Создание объекта геокодера
var geocoder = new YMaps.Geocoder("<?php echo $address; ?>");
// По завершению геокодирования инициализируем карту первым результатом
YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {
if (geocoder.length()) {
map.setBounds(geocoder.get(0).getBounds());
// Создание метки с всплывающей подсказкой
var placemark = new YMaps.Placemark(map.getCenter(), {hasHint: 1});
// Добавление метки на карту
map.addOverlay(placemark);
placemark.openBalloon('<div style="text-align:center; width: 200px; "><strong><?php echo $address; ?></strong></div>');
}
});
}, 0);
</script>
</head>
<body>
<div id="YMapsID" style="width:580px;height:380px"></div>
</body>
</html> |
В самом начале мы получаем параметр адреса, переданный методом GET.
Устанавливаем нулевые границы и отступы для станицы с картой.
После этого мы производим инициализацию карты с задержкой по времени window.setTimeout, значение ставим 0.
Далее как обычно, определяем карту и добавляем на нее элементы управления.
После производим геокодирование адреса и выводим балун с текстом адреса на карте.
Посмотреть работу примера в действии
Бывает ситуация когда все значения для меток на карте хранятся в базе данных, тогда в качестве передаваемого параметра лучше использовать id-записи в базе.
Пример вывода карты с метками из базы данных
Код файла index2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример Яндекс.Карта в модальном окне - пример 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script src="http://api-maps.yandex.ru/1.1/?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ymap1').fancybox();
$('#ymap2').fancybox();
$('#ymap3').fancybox();
$('#ymap4').fancybox();
})
</script>
</head>
<body>
<p>Абзац <a href="map-bd.php?idm=1" title="Абзац" id="ymap1">Нижний Новгород, ул. Совнаркомовская,25</a></p>
<p>Большой город <a href="map-bd.php?idm=11" title="Большой город" id="ymap2">г.Нижний Новгород, ул. Максима Горького,184</a></p>
<p>Камелот Риэлти <a href="map-bd.php?idm=24" title="Камелот Риэлти" id="ymap3">г.Нижний Новгород, ул. Красных Зорь,25-1</a></p>
<p>Александр Невский <a href="map-bd.php?idm=35" title="Александр Невский" id="ymap4">г.Нижний Новгород, пр.Ленина,56-37</a></p>
</body>
</html> |
Он похож на код первого примера, только мы используем плагин FancyBox не передавая ему ни каких параметров.
А сам код ссылки имеет вид:
<a href="map-bd.php?idm=1" title="Абзац" id="ymap1">Нижний Новгород, ул. Совнаркомовская,25</a>
В файл вывода карты map-bd.php мы передаем параметр idm=1.
Код файла map-bd.php:
<?php
include("config.php");
if(isset($_GET['idm'])) {$idm = $_GET['idm'];}
if(!isset($idm)) {$idm = 1;}
?>
<!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>На карте</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
window.setTimeout(function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.addControl(new YMaps.TypeControl());//Тип карты, кнопочки Схема, Гибрид, Спутник
map.addControl(new YMaps.ToolBar());//Тулбар, кнопки Рука, Лупа, Линейка
map.addControl(new YMaps.Zoom());
<?php
$sql1 = "SELECT * FROM mymetki_ymap WHERE id = '$idm'";
$result1 = mysql_query($sql1) or die("Ошибочный запрос: " . mysql_error());
while ($mas1 = mysql_fetch_array($result1))
{
?>
map.setCenter(new YMaps.GeoPoint(<?php echo $mas1['lat_map'], ',', $mas1['lng_map'], '), 16'; ?>);
var placemark=new YMaps.Placemark(new YMaps.GeoPoint(<?php echo $mas1['lat_map'], ',', $mas1['lng_map']; ?>));
map.addOverlay(placemark);
placemark.openBalloon('<div style="text-align:center"><strong><?php echo $mas1['name']; ?></strong><br>Адрес: <?php echo $mas1['adress'], '<br>Телефон: ', $mas1['phone']; ?></div>');
<?php
}
?>
}, 0);
</script>
</head>
<body>
<div id="YMapsID" style="width:580px;height:380px"></div>
</body>
</html> |
Здесь мы в начале подключаем файл с параметрами для соединения с базой данных, а затем принимаем значение переданного параметра.
Выполняем запрос к таблице mymetki_ymap, где хранятся значения для наших меток и выводим полученные данные на карту.
Вот уж спасибо за дельные статьи. А то сам яндекс документацию дал не юзер-френдли — не разберешь че к чему там, и в клубах там сидят возомнившие о себе невесть что гуру-проградасты.
А всплывающие окошки эти выглядят супер!
Я вот хотел спросить, а XML-файл с данными и координатами нельзя как-нибудь сгенерировать автоматически? Вручную вбивать 100 геообъектов — можно замучаться..
Первый пример открывает карту внизу страницы, а не в фэнси-окне. Код просто скопировал, заменил ключ. Что я сделал не так?
И еще вопрос тогда уж докучи. Как использовать народную карту? Официальной карты яндекс не сделал пока.
: )
С открытием карты разобрался )
Не скачал ведь сам фенси.
А вот с народной картой вопрос остался..
Ссылка на документацию.
Использовать Народную карту довольно просто заметка на блоге
Это все конечно хорошо. И все это я читал, модуль подключал. Но что править в вашем php-файле не понял.
Перепробовал уже все.
Вставлял {geocodeProvider:»yandex#pmap»} — все равно не работает.
Подготовил два файла с Народной картой в модальном окне index-narod.html и map-narod.php. Все работает, но возникает проблема с геокодированием адресов. Когда у меня адрес был написан с сокращениями г., ул. и д. вообще геокодер народной карты ни чего не находил. Это возникает от того, как пользователи вводили атрибуты объектов при добавлении на Народную карту. Поэтому лучше провести предварительное геокодирование и использовать уже координаты. Надо на эту тему заметку писать, в двух словах не расскажешь.
Точно, дело в запросах было… Спасибо!
Кто-нибудь делал подобное на форумах? На phpbb в частности. У меня не получается. При нажатии на ссылку просто открывается пустое окно. Дело скорее всего в php-файле. У форумов структура сложнее и просто так этот файлик не исполняется.
Скажите, пожалуйста, как поменять кодировку. В firefox все отлично работает, но вот с ие проблемы. Т.к. и в примере, и уже после использования, неправильная кодировка, поэтому не находит адрес на карте. Пробовала менять сама, но не получилось.
Спасибо большое автору!
Все работает, но к вопросу Татьяны присоединюсь — с IE9 проблемы.
На странице карты можно загрузить библиотеку на случай если страница случайно откроется не в окне:
window.ymaps || document.write(»)
А не подскажите тоже самое решение для YaMap 2.0 делаю также через фенси бокс но карты отображаются только со второго клика.