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

Автор: | 11.12.2011

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

В этой заметке я покажу как это сделать, используя плагин 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, где хранятся значения для наших меток и выводим полученные данные на карту.

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

  1. ustus

    Вот уж спасибо за дельные статьи. А то сам яндекс документацию дал не юзер-френдли — не разберешь че к чему там, и в клубах там сидят возомнившие о себе невесть что гуру-проградасты.
    А всплывающие окошки эти выглядят супер!

  2. ustus

    Я вот хотел спросить, а XML-файл с данными и координатами нельзя как-нибудь сгенерировать автоматически? Вручную вбивать 100 геообъектов — можно замучаться..

  3. ustus

    Первый пример открывает карту внизу страницы, а не в фэнси-окне. Код просто скопировал, заменил ключ. Что я сделал не так?

  4. ustus

    И еще вопрос тогда уж докучи. Как использовать народную карту? Официальной карты яндекс не сделал пока.

  5. ustus

    : )
    С открытием карты разобрался )
    Не скачал ведь сам фенси.
    А вот с народной картой вопрос остался..

  6. ustus

    Это все конечно хорошо. И все это я читал, модуль подключал. Но что править в вашем php-файле не понял.

  7. ustus

    Перепробовал уже все.
    Вставлял {geocodeProvider:»yandex#pmap»} — все равно не работает.

    1. admin Автор записи

      Подготовил два файла с Народной картой в модальном окне index-narod.html и map-narod.php. Все работает, но возникает проблема с геокодированием адресов. Когда у меня адрес был написан с сокращениями г., ул. и д. вообще геокодер народной карты ни чего не находил. Это возникает от того, как пользователи вводили атрибуты объектов при добавлении на Народную карту. Поэтому лучше провести предварительное геокодирование и использовать уже координаты. Надо на эту тему заметку писать, в двух словах не расскажешь.

  8. ustus

    Кто-нибудь делал подобное на форумах? На phpbb в частности. У меня не получается. При нажатии на ссылку просто открывается пустое окно. Дело скорее всего в php-файле. У форумов структура сложнее и просто так этот файлик не исполняется.

  9. Татьяна

    Скажите, пожалуйста, как поменять кодировку. В firefox все отлично работает, но вот с ие проблемы. Т.к. и в примере, и уже после использования, неправильная кодировка, поэтому не находит адрес на карте. Пробовала менять сама, но не получилось.

  10. dvcarrot

    На странице карты можно загрузить библиотеку на случай если страница случайно откроется не в окне:

    window.ymaps || document.write(»)

  11. Богорадов

    А не подскажите тоже самое решение для YaMap 2.0 делаю также через фенси бокс но карты отображаются только со второго клика.

Добавить комментарий для Татьяна Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *