JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="padding: 5px;
border: 1px solid #D4D7DC;
width: 210px;
height: 180px;">
</div>
<div>
<p id="dismetro" style="font-size: 15px; line-height: 22px;"></p>
</div>
JavaScript
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [55.7499,37.6290],
zoom: 10,
controls: ['smallMapDefaultSet']
});
ymaps.geocode('Ленинградская область, г. Всеволжск', {
results: 1 // Если нужен только один результат, экономим трафик пользователей
}).then(function (res) {
// Выбираем первый результат геокодирования.
var firstGeoObject = res.geoObjects.get(0),
// Координаты геообъекта.
coords = firstGeoObject.geometry.getCoordinates(),
// Область видимости геообъекта.
bounds = firstGeoObject.properties.get('boundedBy');
// Добавляем первый найденный геообъект на карту.
myMap.geoObjects.add(firstGeoObject);
// Масштабируем карту на область видимости геообъекта.
myMap.setBounds(bounds, {
// checkZoomRange: true
});
var myPlacemark = new ymaps.Placemark(coords, {
// iconContent: 'моя метка',
balloonContent: 'Ленинградская область, г. Всеволжск'
}, {
preset: 'twirl#nightDotIcon',
iconColor: '#992175'
});
myMap.geoObjects.add(myPlacemark);
ymaps.geocode(coords.join(','), {kind: 'metro'}).then(function(res) {
for (var i = 0; i < 1; i++) {
metroObj = res.geoObjects.get(i);
coordsMetro = metroObj.geometry.getCoordinates();
distance = Math.floor(ymaps.coordSystem.geo.getDistance(coords, coordsMetro));
branch = '('+metroObj.properties.get('description').split(', ')[2].split(' ')[0].toLowerCase()+')';
metroName = metroObj.properties.get('name').replace('метро ', '').toLowerCase();
$('#dismetro').append('Расстояние до метро: <b class="fgC purple-color">'+(distance/1000).toFixed(1)+' км</b><br>');
}
});
});
}