Как проложить маршрут по нескольким точкам google maps api?

Question

avzcp4 @avzcp4

Google Maps

Как проложить маршрут по нескольким точкам google maps api?

Прошу помочь с такой проблемой:
При построении маршрута между двумя точками все работает корректно(маркеры удаляем по нажатию на них, драг&дроп работает и маршрут перестраивается)
Если добавлять новые маркера, при этом не удалять предыдущие и не двигать их, то код тоже работает. Но если ставить на карте 3 и более маркеров, после чего если начать перемещать их, или же удалять, всплывают баги.

Думаю что в коде где-то допущена логическая ошибка.
Вот мой код:

var map;
    var markerArr = [];

    var directionsDisplay;
    var directionsService;

    function initMap() {
        
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 50.45466, lng: 30.5238},
            zoom: 8
        });

        google.maps.event.addListener(map, 'click', function(e) {
            placeMarker(e.latLng, map);  
        });

    }


    function routing() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsService = new google.maps.DirectionsService();
        directionsDisplay.setMap(map);
        directionsDisplay.setOptions( { suppressMarkers: true, suppressInfoWindows: true } );

        for (let index = 0; index < markerArr.length; index++) {
            if (index>=1) {
                var request = {
                    origin: new google.maps.LatLng(markerArr[index-1].position.lat(), markerArr[index-1].position.lng()), //точка старта
                    destination: new google.maps.LatLng(markerArr[index].position.lat(), markerArr[index].position.lng()), //точка финиша
                    travelMode: google.maps.DirectionsTravelMode.DRIVING //режим прокладки маршрута
                };

                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {                        
                        directionsDisplay.setDirections(response);
                    }
                });
            }
                        
        }
    }

    function placeMarker(position, map) {
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            draggable: true
        });  

        var r1 = google.maps.event.addListener(marker,"click", removeMarkers.bind(null,position.lat()), false);

        google.maps.event.addListener(marker, 'dragend', function(marker) {
            google.maps.event.removeListener(r1);
            directionsDisplay.setMap(null);
            remMarker(marker.latLng.lat());
            routing();
        });

        function remMarker(params) {
            google.maps.event.addListener(marker,"click", removeMarkers.bind(null,params), false);
        }

        markerArr.push(marker);
        //console.log(markerArr[0].position.lat());
        map.panTo(position);
        console.log(markerArr);
        routing();

    }

    function removeMarkers(pos){
        for(let i=0; i<markerArr.length; i++){
            if (markerArr[i].position.lat() == pos) {
                markerArr[i].setMap(null);
                markerArr = markerArr.filter(elem => elem.map != null);
            }
            
        }

        console.log(markerArr);
        directionsDisplay.setMap(null);
        routing();
    }