Анимация маркера карт Google не работает в правильном порядке последовательности

Question

Я создаю waze-подобный поток навигации в моем веб-приложении с помощью API-интерфейса Google Maps JS.приложение также использует React. У меня есть массив точек широты и долготы, и я делаю некоторые вычисления, чтобы получить следующее число в массиве, к которому мне нужно анимировать маркер.

Это делается вЧтобы оставить маркер на дороге и не перемещать его по зданию или что-то в этом роде, в любом случае я должен запустить метод X раз (допустим, 5 раз).

Каждая функция является анимациейфункция, которая имеет динамическую продолжительность, я пытался использовать асинхронное ожидание, пытался тайм-аут, но я не могу получить функцию в правильной последовательности.

Это функция анимации, которую я назначил Google.maps.marker prototype [ссылка] https://raw.githubusercontent.com/combatwombat/marker-animate/master/markerAnimate.js

Сама анимация работает, но вместо анимации из точки 1 в 2, затем в 3, затем в 4, затем в 5 я анимирую прямо в точку 5.

Я предполагаю, что проблема в том, что я использую цикл for.Я не могу обернуть голову вокруг этого.Вот пример кода:

for (
        let index = currentMarkerLocationIndex;
        index <= simPointsIndexes[simPointArrIndex];
        index++
    ) {
        let bounds = getBoundsPositions({ lat: this.state.simCoordinates[index].lat(), lng: this.state.simCoordinates[index].lng() },
            this.state.cusLocation
        );
        var { center, zoom } = fitBounds(bounds, this.state.windowSize);

        let x = await (async () => { //let x is used just for the await part
            return new Promise((resolve, reject) => {
                this.state.engMarker.animateTo(
                    this.state.simCoordinates[index],
                    {
                        easing: 'linear',
                        duration: (this.props.refreshRate * 1000) / slicedLengthSimCoordinatesArr.length,
                        complete: this.calcZoomAndCenter(zoom, center)
                    }
                );
            })
        }
        )
    }
    currentMarkerLocationIndex = simPointsIndexes[simPointArrIndex];
    simPointArrIndex++;

Я хочу:

this.state.engMarker.animateTo(this.state.simCoordinates[index], {options})

, чтобы работать с индексом 1, закончить анимацию (которая имеет продолжительность), а затем перейти к анимации от 1до 2 и т. д.

Есть идеи о том, что мне следует искать?