JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.standard&amp;lang=ru-RU"></script>
<div id="yandex-map"></div>

CSS

#yandex-map {
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
}

JavaScript

ymaps.ready(init);
var customPlacemarkOptions = {
    iconLayout: 'default#image',
    iconImageHref: 'http://fiber.i-vi-test.ru/i/map-icon.png',
    iconImageSize: [45, 57],
    iconImageOffset: [-24, -65],
    balloonShadow: false,
    draggable: false
},
balloonData = {
    hintContent: 'ТЕРРИТОРИЯ ПОКРЫТИЙ<br>г. Москва, Филевский бульвар, д. 11'
};

function init() {
    // Поиск координат центра Нижнего Новгорода.
    ymaps.geocode('г. Москва, Филевский бульвар, д. 11', {
        results: 1
    }).then(function (res) {
        // Выбираем первый результат геокодирования.
        var firstGeoObject = res.geoObjects.get(0),
            // Создаем карту с нужным центром.
            coords = firstGeoObject.geometry.getCoordinates(),
            myMap = new ymaps.Map("yandex-map", {
                center: coords,
                zoom: 16
            });
        
        myMap.container.fitToViewport();

        // Добавим на карту метку в точку, по координатам
        // которой запрашивали обратное геокодирование.
        var placemark = new ymaps.Placemark(coords, balloonData, customPlacemarkOptions);
        myMap.geoObjects.add(placemark);
    });
}