JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
 <div id="map" style="width: 600px; height: 400px"></div>

JavaScript

ymaps.ready(init);
    var myMap,
        myPlacemark;

    function init(){     
        myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 7
        });

        myPlacemark = new ymaps.Placemark([55.76, 37.64], { 
            hintContent: 'Москва!', 
            balloonContent: 'Столица России' 
        });

        myMap.geoObjects.add(myPlacemark);
        
        ymaps.route([
    'Королев',
    { type: 'viaPoint', point: 'Мытищи' },
    'Химки',
    { type: 'wayPoint', point: [55.811511, 37.312518] }
], {
    mapStateAutoApply: true
}).then(function (route) {
    route.getPaths().options.set({
        // в балуне выводим только информацию о времени движения с учетом пробок
        balloonContentLayout: ymaps.templateLayoutFactory.createClass('{{ properties.humanJamsTime }}'),
        // можно выставить настройки графики маршруту
        strokeColor: '0000ffff',
        opacity: 0.9
    });
    // добавляем маршрут на карту
    myMap.geoObjects.add(route);
});
    }