JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

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

CSS

#YMapsID {
    width: 1200px;
    height: 600px;
}

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("YMapsID", {
        center: [54.166849, 37.586356],
        zoom: 15,
        behaviors: ['default', 'scrollZoom']
    });
    myMap.controls
        // Кнопка изменения масштаба.
        .add('zoomControl', {left: 5, top: 5})
        // Список типов карты
        .add('typeSelector')
        // Стандартный набор кнопок
        .add('mapTools', {left: 35, top: 5});
    
    ymaps.route([
        'Россия, Тула, проспект Ленина, 92',
        'Россия, Тула, улица Ползунова, 1']
        ).then(function (route) {
            myMap.geoObjects.add(route);
            var points = route.getWayPoints(),
                lastPoint = points.getLength() - 1;
            // Задаем стиль метки - иконки будут красного цвета, и
            // их изображения будут растягиваться под контент.
        
            // Ссылка на картинку
            points.get(lastPoint).options.set('iconImageHref', 'http://i.imgur.com/96OsEbf.png');
            // Размер картинки
            points.get(lastPoint).options.set('iconImageSize', [34, 35]);
            // Смещение картинки относительно "ножки" (точки привязки)
            points.get(lastPoint).options.set('iconImageOffset', [-17, -17]);
            // Показывать ли тень
            points.get(lastPoint).options.set('balloonShadow', false);
            // Текст на иконке
            points.get(lastPoint).properties.set('iconContent', ' ');
            points.get(0).options.set('preset', 'twirl#redStretchyIcon');
            points.get(0).properties.set('iconContent', ' ');

    }, function (error) {
        alert('Возникла ошибка: ' + error.message);
    });
}