JSFiddle - React, Tailwind, and code Playground

by zloylos

HTML

<script src="http://api-maps.yandex.ru/2.1-dev?load=package.full&lang=en-US"></script>
    
<div id="map"></div>
<button id="geocode">search metro "Park Pobedy" @ S-P</button>

CSS

#map {
    width: 400px;
    height: 400px;
}

JavaScript

var myMap;
ymaps.ready(function () {
    myMap = new ymaps.Map('map', {
        center: [59.95, 30.3],
        zoom: 12
    });
    
    document.querySelector('#geocode').addEventListener('click', function () {
        ymaps.geocode('Saint-Petersburg metro Park Pobedy', {
            kind: 'metro',
            boundedBy: [[59.95, 30.3],[59.95, 30.3]],
            results: 1
        }).then(function (res) {
            var geoObject = res.geoObjects.get(0);
            myMap.geoObjects.add(geoObject);
            myMap.setCenter(geoObject.geometry.getCoordinates());
        });
    }, false);
});