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

Иногда, при разработке картографических сервисов, возникает необходимость вывести Яндекс.Карту во всплывающем (модальном) окне.

В этой заметке я покажу как это сделать, используя плагин 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 геообъектов - можно замучаться..
  • Гость: Первый пример открывает карту внизу страницы, а не в фэнси-окне. Код просто скопировал, заменил ключ. Что я сделал не так?
  • Гость: И еще вопрос тогда уж докучи. Как использовать народную карту? Официальной карты яндекс не сделал пока.
  • Гость: : ) С открытием карты разобрался ) Не скачал ведь сам фенси. А вот с народной картой вопрос остался..
  • Гость: Ссылка на <a href="http://api.yandex.ru/maps/jsapi/doc/mod/concepts/pmap.xml" rel="nofollow">документацию</a>. Использовать Народную карту довольно просто <a href="http://webmap-blog.ru/yandex-maps/ispolzuem-narodnuyu-kartu-na-svoem-sajte" rel="nofollow">заметка на блоге</a>
  • Гость: Это все конечно хорошо. И все это я читал, модуль подключал. Но что править в вашем php-файле не понял.
  • Гость: Перепробовал уже все. Вставлял {geocodeProvider:"yandex#pmap"} - все равно не работает.
  • Гость: Подготовил два файла с Народной картой в модальном окне <a href="http://webmap-blog.ru/files/ymap-modal/index-narod.html" rel="nofollow">index-narod.html</a> и <a href="http://webmap-blog.ru/files/ymap-modal/map-narod.txt" rel="nofollow">map-narod.php</a>. Все работает, но возникает проблема с геокодированием адресов. Когда у меня адрес был написан с сокращениями г., ул. и д. вообще геокодер народной карты ни чего не находил. Это возникает от того, как пользователи вводили атрибуты объектов при добавлении на Народную карту. Поэтому лучше провести предварительное геокодирование и использовать уже координаты. Надо на эту тему заметку писать, в двух словах не расскажешь.
  • Гость: Точно, дело в запросах было... Спасибо!
  • Гость: Кто-нибудь делал подобное на форумах? На phpbb в частности. У меня не получается. При нажатии на ссылку просто открывается пустое окно. Дело скорее всего в php-файле. У форумов структура сложнее и просто так этот файлик не исполняется.
  • Гость: Скажите, пожалуйста, как поменять кодировку. В firefox все отлично работает, но вот с ие проблемы. Т.к. и в примере, и уже после использования, неправильная кодировка, поэтому не находит адрес на карте. Пробовала менять сама, но не получилось.
  • Гость: Спасибо большое автору! Все работает, но к вопросу Татьяны присоединюсь — с IE9 проблемы.
  • Гость: На странице карты можно загрузить библиотеку на случай если страница случайно откроется не в окне: window.ymaps || document.write('')
  • Гость: А не подскажите тоже самое решение для YaMap 2.0 делаю также через фенси бокс но карты отображаются только со второго клика.