Добавляем на карту слой пробок, с использованием API Яндекс.Карт

25 августа 2010 года компанией Яндекс было заявлено о возможности добавления карты пробок на любой сайт, с использованием API Яндекс.Карт.

О б этом я уже писал на своем блоге «Карту пробок от «Яндекса» можно вставить на любой веб-сайт».

В этой заметке я хочу подробно познакомить Вас с тем как это можно сделать.

Нам понадобиться пример кода для вывода карты с элементами управления.

<!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>
<title>Яндекс.Карта с элементами управления</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
 
<script language="JavaScript" type="text/javascript">
 
var map; 
 
// Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
 
 
            // Создание экземпляра карты и его привязка к созданному контейнеру
            map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.998779,56.316537), 14);
 
 
			map.addControl(new YMaps.Zoom());
	        map.addControl(new YMaps.TypeControl());
 
            map.addControl(new YMaps.SearchControl());	        
 
			map.addControl(new YMaps.ToolBar());		
});
 
</script> 
</head> 
 
<body> 
 
<div id="YMapsID" style="width:800px; height:600px;"></div> 
 
</body> 
</html>

Пример в действии

Теперь добавим на нашу карту слой с пробками.

Для этого в начале,  необходимо подключить специальный модуль traffic.

Сделать это можно указав в строке подключения  API  дополнительный параметр modules со значением traffic:

 <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==&modules=traffic" type="text/javascript"></script>

Если у Вас уже был подключен ранее какой-либо модуль, для того чтобы подключить еще один нужно разделить название модулей символом ~.

Например, Вы уже использовали модуль «Активные области», тогда строка подключения API будет иметь вид:

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==&modules=hotspots~traffic" type="text/javascript"></script>

Далее мы создаем элемент управления Пробки и добавляем его на карту.

За это отвечают строки

// создание элемента управления "Пробки"
var  traffic = new YMaps.Traffic.Control();                                                             

// добавление элемента управления "Пробки" на карту
map.addControl(traffic);

Для отображения пробок на карте нужно добавить еще одну строку

// включение показа пробок
traffic.show();

Посмотреть пример в действии и исходный код

Подробнее об использовании модуля «Пробки» можно прочитать по адресу http://api.yandex.ru/maps/jsapi/doc/mod/traffic/concepts/About.xml

  • Гость: спасибо вам за статью! Скажите, пожалуйста, а как можно реализовать поиск по городам на яндекс.пробки? И если не сложно, с примером для уже имеющегося кода. Я понимаю, выглядит как наглость, но это будет полезно не только мне, но и пользователям, а так же и вашему ресурсу! Заранее спасибо