Терминалы на карте

Для получения списка терминалов с координатами следует использовать метод "Справочник терминалов". В ответе присутствуют параметры "latitude" (широта) и "longitude" (долгота), их необходимо использовать для задания координат точки на карте. Координаты терминалов используются для нахождения точки местоположения, а координаты городов - для установки центра карты при отображении всех терминалов города. Масштаб карты можно выбрать, исходя из размеров карты.

Отображение терминалов на Яндекс.Карты

Описание возможностей API Яндекс.Карты находится по адресу http://api.yandex.ru/maps/. Основные моменты и параметры подключения для работы с сервисом Яндекса можно найти в документации. Далее представлен пример использования данных терминалов при работе с API Яндекс.Карты версии 2.1.

Данные API Деловые Линии в JSON/XML формате:

{  
   "city":[  
      {  
         "name":"Санкт-Петербург",
         "latitude":59.9366,
         "longitude":30.4128,
         "terminals":[  
            {  
               "name":"Санкт-Петербург-Стачек",
               "address":"пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)",
               "fullAddress":"198097, Санкт-Петербург г, Стачек пр-кт, дом № 45, корпус 2",
               "latitude":59.8873,
               "longitude":30.2596
            },
            {  
               "name":"Санкт-Петербург-Парнас",
               "address":"2-й Верхний пер., 13А",
               "fullAddress":"194292, Санкт-Петербург г, 2-й Верхний пер, дом № 13 А",
               "latitude":60.0664,
               "longitude":30.3804
            },
            {  
               "name":"Санкт-Петербург-Восток",
               "address":"ул.Латышских Стрелков, 31",
               "fullAddress":"193231, Санкт-Петербург г, Латышских Стрелков ул, дом № 31",
               "latitude":59.9348,
               "longitude":30.4492
            }
         ]
      }
   ]
}

<response>
   <city>
      <name>Санкт-Петербург</name>
      <latitude>59.9366</latitude>
      <longitude>30.4128</longitude>
      <terminals>
         <name>Санкт-Петербург-Стачек</name>
         <address>пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)</address>
         <fullAddress>198097, Санкт-Петербург г, Стачек пр-кт, дом № 45, корпус 2</fullAddress>
         <latitude>59.8873</latitude>
         <longitude>30.2596</longitude>
      </terminals>
      <terminals>
         <name>Санкт-Петербург-Парнас</name>
         <address>2-й Верхний пер., 13А</address>
         <fullAddress>194292, Санкт-Петербург г, 2-й Верхний пер, дом № 13 А</fullAddress>
         <latitude>60.0664</latitude>
         <longitude>30.3804</longitude>
      </terminals>
      <terminals>
         <name>Санкт-Петербург-Восток</name>
         <address>ул.Латышских Стрелков, 31</address>
         <fullAddress>193231, Санкт-Петербург г, Латышских Стрелков ул, дом № 31</fullAddress>
         <latitude>59.9348</latitude>
         <longitude>30.4492</longitude>
      </terminals>
   </city>
</response>

Данные необходимо передать для работы с JavaScript и сформировать скрипт:

<script>
ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", { // "map" - id селектора, в который вставляется объект карты Яндекс
            center: [59.9366, 30.4128], // [широта, долгота] центровка из данных города
            zoom: 10 // масштаб для карты, устанавливается в зависимости от размера
        });

  // Добавление точек терминалов на карту
    myMap.geoObjects
        .add(new ymaps.Placemark([59.8873, 30.2596], {
            balloonContent: '<strong>Санкт-Петербург-Стачек</strong>
пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)' // в содержимом можно вывеси простой или полный адрес
        }, {
            preset: 'islands#dotIcon', // выбор варианта метки
        }))
        .add(new ymaps.Placemark([60.0664, 30.3804], {
            balloonContent: '<strong>Санкт-Петербург-Парнас</strong>
2-й Верхний пер., 13А' // в содержимом можно вывеси простой или полный адрес
        }, {
            preset: 'islands#dotIcon', // выбор варианта метки
        }))
        .add(new ymaps.Placemark([59.9348, 30.4492], {
            balloonContent: '<strong>Санкт-Петербург-Восток</strong>
ул.Латышских Стрелков, 31' // в содержимом можно вывеси простой или полный адрес
        }, {
            preset: 'islands#dotIcon', // выбор варианта метки
        }));
} 
</script>

<div id='map'></div>

В результате должна отобразиться карта, представленная ниже:

Отображение терминалов на Google Maps

Описание возможностей API Google Maps находится по адресу https://developers.google.com/maps/. Основные моменты и параметры подключения для работы с сервисом Google Maps можно найти в документации. Далее представлен пример использования данных терминалов при работе с API Google Maps версии 3.

Данные терминалов из API Деловые Линии см. разделе, посвящённом Яндекс.Картам. После передачи в JavaScript код будет выглядеть следующим образом:

<script>
function initialize() {
  var mapOptions = {
    zoom: 10, // масштаб для карты, устанавливается в зависимости от размера
    center: new google.maps.LatLng(59.9366,30.4128) // (широта, долгота) центровка из данных города
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions); // "map" - id селектора, в который вставляется объект карты Google

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(59.8873,30.2596), // (широта,долгота) координаты из данных терминала
      map: map, // привязка к объекту карты 'map'
      title: 'Санкт-Петербург-Стачек' // вывод названия при наведении на метку
  });

  google.maps.event.addListener(marker, 'click', function() { // создание события открытия описания при клике на метку
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Стачек</strong>
пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)', // в содержимом можно вывеси простой или полный адрес
      maxWidth: 200 // максимальная ширина окна описания(не обязательно)
    }).open(map,marker);
  });

  var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(60.0664,30.3804), // (широта,долгота) координаты из данных терминала
      map: map, // привязка к объекту карты 'map'
      title: 'Санкт-Петербург-Парнас' // вывод названия при наведении на метку
  });

  google.maps.event.addListener(marker2, 'click', function() { // создание события открытия описания при клике на метку
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Парнас</strong>
2-й Верхний пер., 13А', // в содержимом можно вывеси простой или полный адрес
      maxWidth: 200 // максимальная ширина окна описания(не обязательно)
    }).open(map,marker2);
  });

  var marker3 = new google.maps.Marker({
      position: new google.maps.LatLng(59.9348,30.4492), // (широта,долгота) координаты из данных терминала
      map: map, // привязка к объекту карты 'map'
      title: 'Санкт-Петербург-Восток' // вывод названия при наведении на метку
  });

  google.maps.event.addListener(marker3, 'click', function() { // создание события открытия описания при клике на метку
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Восток</strong>
ул.Латышских Стрелков, 31', // в содержимом можно вывеси простой или полный адрес
      maxWidth: 200 // максимальная ширина окна описания(не обязательно)
    }).open(map,marker3);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id='map'></div>

В результате должна отобразиться карта, представленная ниже: