Sync the line and icon animations together?

[Guitrum]

This is a fantastic and easy to follow snippet. I like that you gave the option to animate either the icon or the line path (or both).

I was wondering if you had a way with this snippet to sync the two? Perhaps have the line animation between two points trigger when the icon reaches the first point?

[VDWWD]

It can be done with another marker that is added/moved in the animatePolyline() function. Add this snippet to also add an icon to the starting point of the line that moves with it.

first, add this to the top of the js file var lineMarker;

Then add this snippet in animatePolyline() below "linePartArr.push(linePart);"

//for Guitrum
if (lineMarker == null) {
    lineMarker = new google.maps.Marker({
        position: new google.maps.LatLng(lineCoordinates[i + 1]),
        map: map
    });
} else {
    lineMarker.setPosition(new google.maps.LatLng(lineCoordinates[i + 1]));
}

And add this to the first setTimeout

lineMarker.setMap(null);
lineMarker = null;

Complete new function:

//animate the drawing of the polyline
var lineMarker;
function animatePolyline() {
    var i = 0;
    var pause = false;
    var pauseLineRemove = 1500;
    var pauseRedrawLine = 1000;

    //experiment with the speed based on the total parts in the line
    var drawSpeed = 50;

    setInterval(function () {

        //check if the end of the array is reached
        if (i + 1 == lineCoordinates.length && !pause) {
            pause = true;

            //remove all the line parts, optionally with a delay to keep the fully drawn line on the map for a while
            setTimeout(function () {
                for (var j = 0; j < linePartArr.length; j++) {
                    linePartArr[j].setMap(null);
                }

                linePartArr = [];
                lineMarker.setMap(null);
                lineMarker = null;
            }, pauseLineRemove);

            //delay the drawing of the next animated line
            setTimeout(function () {
                pause = false;
                i = 0;
            }, pauseRedrawLine + pauseLineRemove);
        }

        //create a line part between the current and next coordinate
        if (!pause) {
            var part = [];
            part.push(lineCoordinates[i]);
            part.push(lineCoordinates[i + 1]);

            //create a polyline
            var linePart = new google.maps.Polyline({
                path: part,
                strokeColor: '#ff0000',
                strokeOpacity: 1,
                strokeWeight: 5,
                zIndex: 10,
                map: map
            });

            //add the polyline to an array
            linePartArr.push(linePart);

            //for Guitrum
            if (lineMarker == null) {
                lineMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(lineCoordinates[i + 1]),
                    map: map
                });
            } else {
                lineMarker.setPosition(new google.maps.LatLng(lineCoordinates[i + 1]));
            }

            i++;
        }

    }, drawSpeed);
}

[Guitrum]

@VDWWD Thank you for the swift reply!

It looks like the solution you posted draws the icon at the front of each line as the lines get drawn. This appears to be independent of the circle icon being animated and moving along the line path.

What I was hoping for was to have a line segment get drawn between two points right as the circle icon hits the first point. then the circle icon continues to animate and move along the line and right when it reaches the endpoint, the next line gets drawn.

So basically the circle icon moves smoothly along the path and each time it hits a new segment, the next segment gets drawn. That way it looks like the moving circle icon initiates the path being drawn.

Is this possible?