Добавляем на свой сайт карту «Яндекс.Пробки»

Т.к. с момента постановки задачи «разместить на сайте карту Яндекс.пробки» до ее выполнения я потеряла массу времени на чтение невозможно запутанной документации Яндекс АПИ (по поводу чего можно писать отдельный, полный ненависти пост), размещу готовый пример вызова яндекс карты со слоем пробок, дабы сэкономить тебе, мой читатель, ценное время.

Итак, сначала нужно получить АПИ-ключ

Затем подключаем в рамках <head></head>следующий код:

<script type="text/javascript" src="http://api-maps.yandex.ru/1.1/index.xml?key=ADlXcVABAAAAKYveRAIA4kE2qEF9Wp3_3asekVpo53LOCn8AAAAAAAAAAADGtjE36FFsWlWgGvjRW62CsefaoQ==&amp;modules=traffic"></script><script type="text/javascript" language="JavaScript">
var map; YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(49.122442,55.798758), 12);
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.SearchControl());
map.addControl(new YMaps.ToolBar());
// создание элемента управления "Пробки"
var traffic = new YMaps.Traffic.Control();
// добавление элемента управления "Пробки" на карту
map.addControl(traffic);
// включение показа пробок
traffic.show();
});

Не забудьте поменять АПИ ключ на свой и сгенерить координаты карты (здесь следует заметить, что если вы пользуетесь версией АПИ 2.*, предлагаемые яндексом координаты Х и У нужно поменять местами, о чем тоже можно добавить пару злобных строк в тот самый полный ненависти пост).

Далее вставляем контейнер для карты в тело документа

<div id="YMapsID" style="width: 710px; height: 348px;"></div>

Код страницы целиком:

var map;
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(49.122442,55.798758), 12);
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.SearchControl());
map.addControl(new YMaps.ToolBar());
// создание элемента управления "Пробки"
var traffic = new YMaps.Traffic.Control();
// добавление элемента управления "Пробки" на карту
map.addControl(traffic);
// включение показа пробок
traffic.show();
});
<div id="YMapsID" style="width: 710px; height: 348px;"></div>
  • Webmaster

    Спасибо за хорошее «человеческое описание», только Код страницы целиком я немного поправил:

    var map; YMaps.jQuery(function () {
    // Создание экземпляра карты и его привязка к созданному контейнеру
    map = new YMaps.Map(YMaps.jQuery(«#YMapsID»)[0]);
    // Установка для карты ее центра и масштаба
    map.setCenter(new YMaps.GeoPoint(30.522301,50.451118), 12);
    map.addControl(new YMaps.Zoom());
    map.addControl(new YMaps.TypeControl());
    map.addControl(new YMaps.SearchControl());
    map.addControl(new YMaps.ToolBar());
    // создание элемента управления «Пробки»
    var traffic = new YMaps.Traffic.Control();
    // добавление элемента управления «Пробки» на карту
    map.addControl(traffic);
    // включение показа пробок
    traffic.show();
    });

    так работает…

    • Артем

      Сделал как описано в Вашем блоге

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

      Теперь вопрос, как панель включения пробок и баллы поднять выше?

      Спасибо!

  • Алекс

    в первом коде нет

  • Елена Ларюшкина

    Все сделала, как описано. Но сами карты серые. Т.е. карта не отображается, только ее серое поле. Может такое быть из-за того, что сайт не проиндексирован Яндексом?