Поиск по сайту

API
Главная / API - Terminals on the map

Terminals on the map

Обновлено 01.12.2021
592 кб

To get the list of terminals with coordinates use "Terminals directory" method. There are "latitude" and "longitude" parameters in the response, those parameters will be used to set a pin on the map. The terminals coordinates are used to set the pins on the map while cities coordinates are used to properly center the map while displaying all the city terminals. It is possible to choose a map scale based on the map size.

Using Yandex.Maps to display terminals

Find Yandex.Maps API documentation at http://api.yandex.com/maps/. For basic description as well as Yandex.Maps API connection parameters, see the documentation. Below you will find the directions on using the terminals data with ver. 2.1 of Yandex.Maps API.

Delovye Linii API data in JSON/XML format, see below:

{  
   "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>

Use the data to write a JavaScritp code, see an example below:

<script>
ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", { // "map" - id of the selector where Yandex.Maps object is inserted
            center: [59.9366, 30.4128], // [latitude, longitude] using the city coordinates to center the map
            zoom: 10 // map scale, depends on the map size
        });

  // Adding the terminals pins to the map
    myMap.geoObjects
        .add(new ymaps.Placemark([59.8873, 30.2596], {
            balloonContent: '<strong>Санкт-Петербург-Стачек</strong>
пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)' // short or full address can be used
        }, {
            preset: 'islands#dotIcon', // selecting pin icon
        }))
        .add(new ymaps.Placemark([60.0664, 30.3804], {
            balloonContent: '<strong>Санкт-Петербург-Парнас</strong>
2-й Верхний пер., 13А' // short or full address can be used
        }, {
            preset: 'islands#dotIcon', // selecting pin icon
        }))
        .add(new ymaps.Placemark([59.9348, 30.4492], {
            balloonContent: '<strong>Санкт-Петербург-Восток</strong>
ул.Латышских Стрелков, 31' // short or full address can be used
        }, {
            preset: 'islands#dotIcon', // selecting pin icon
        }));
} 
</script>

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

As a result a map will be displayed, see below:

Using Google Maps to display terminals

Find Google Maps API documentation at https://developers.google.com/maps/. For basic description as well as Google Maps API connection parameters, see the documentation. Below you will find the directions on using the terminals data with ver. 3 of Google Maps API.

Use the Delovye Linii API data from the Yandex.Maps section.  For JavaScript code example, see below:

<script>
function initialize() {
  var mapOptions = {
    zoom: 10, // map scale, depends on the map size
    center: new google.maps.LatLng(59.9366,30.4128) // (latitude, longitude) using the city coordinates to center the map
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions); // "map" - id of the selector where Google Maps object is inserted

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(59.8873,30.2596), // (latitude, longitude)the terminal coordinates
      map: map, // binding to the 'map' object
      title: 'Санкт-Петербург-Стачек' // the name to be displayed while hovering over the pin
  });

  google.maps.event.addListener(marker, 'click', function() { // creating an event: clicking on the pin opens a box with the description
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Стачек</strong>
пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)', // short or full address can be used
      maxWidth: 200 // maximum width of the description box (optional)
    }).open(map,marker);
  });

  var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(60.0664,30.3804), // (latitude, longitude)the terminal coordinates
      map: map, // binding to the 'map' object
      title: 'Санкт-Петербург-Парнас' // the name to be displayed while hovering over the pin
  });

  google.maps.event.addListener(marker2, 'click', function() { // creating an event: clicking on the pin opens a box with the description
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Парнас</strong>
2-й Верхний пер., 13А', // short or full address can be used
      maxWidth: 200 // maximum width of the description box (optional)
    }).open(map,marker2);
  });

  var marker3 = new google.maps.Marker({
      position: new google.maps.LatLng(59.9348,30.4492), // (latitude, longitude)the terminal coordinates
      map: map, // binding to the 'map' object
      title: 'Санкт-Петербург-Восток' // the name to be displayed while hovering over the pin
  });

  google.maps.event.addListener(marker3, 'click', function() { // creating an event: clicking on the pin opens a box with the description
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Восток</strong>
ул.Латышских Стрелков, 31', // short or full address can be used
      maxWidth: 200 // maximum width of the description box (optional)
    }).open(map,marker3);
  });
}

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

</script>

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

As a result a map will be displayed, see below:

Some parameters may change with the map service API update. In such cases the older versions will continue to work however without guaranteed support or up-to-date documentation