Terminals on the map
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: