Tell me, please, how can I turn off the drawing of the route until it is fully ready? That is, show the map only when the entire entire route is formed.

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> function init() { var multiRoute = new ymaps.multiRouter.MultiRoute({ referencePoints: [ [53.7472301068544, 87.1177096741265], [53.7535593053719, 87.1182865722019], [53.757066429694, 87.1184041616726], [53.7611378129068, 87.1185043238268], [53.7633949909674, 87.1150907257471], [53.7651320504216, 87.1036804148398], [53.7710005056744, 87.1016787887237], [53.7667860645947, 87.0942806233698], [53.7566611540789, 87.0885903350341], [53.7530959647668, 87.0847338675193], [53.7506425644254, 87.0743838381418], [53.7513875815114, 87.0618752469681], [53.7515762695034, 87.0526045434045], [53.747720082387, 87.040476119259], [53.7448029873482, 87.0328971230384], [53.7457869832064, 87.0192332085778], [53.7485576919019, 87.0130138125397], [53.7527330829135, 87.0053422000133] ] }, { wayPointVisible: false, boundsAutoApply: true }); var myMap = new ymaps.Map('map', { center: [53.7472301068544, 87.1177096741265], zoom: 15 }); myMap.geoObjects.add(multiRoute); myCollection = new ymaps.GeoObjectCollection(null, { preset: 'islands#grayStretchyIcon' }); myCollection .add( new ymaps.GeoObject({ geometry: { type: "Point", coordinates: [53.7472301068544, 87.1177096741265]}, properties: { iconContent: 'Вокзал' } })) .add( new ymaps.GeoObject({ geometry: { type: "Point", coordinates: [53.7527330829135, 87.0053422000133]}, properties: { iconContent: 'АЗС' } })) ; myMap.geoObjects.add(myCollection); } ymaps.ready(init); </script> <div id="map" style="width: 100%; height: 720px; padding-bottom:15px">

The page with the route here: https://www.vokzal-nk.ru/bus-53

    1 answer 1

    You can hide the map at the start, wait for the "activeroutechange" event on the route instance and show the map

    https://jsfiddle.net/gqx54o1L/19/

     multiRoute.events.add('activeroutechange', function () { document.getElementById('map').classList.remove('hidden'); });