Animate symbol on multiple geodesic polylines

Question

I want to animate symbols though multiple geodesic polylines...i tired to do this in a for loop. the lines get drawn but the circle (symbol) does not animate..it just stays at the starting point here is my code.

    var poly;
    var geodesic;
    var map;
    var clickcount = 0;

    function initialize() {


        var styles = [{ featureType: "landscape", stylers: [{ color: "#000514"}] }, { featureType: "administrative.country", stylers: [{ weight: 0.1 }, { color: "#009acd"}] }, { featureType: "water", stylers: [{ color: "#1f4fa5dc"}] }, { featureType: "road", stylers: [{ color: "#000514"}] }, { featureType: "administrative.locality", stylers: [{ color: "#7cfc00" }, { visibility: "off"}] }, { featureType: "landscape.man_made", stylers: [{ visibility: "off"}] }, { featureType: "poi", stylers: [{ visibility: "off"}] }, { featureType: "administrative.province", stylers: [{ visibility: "on"}]}];
        var mapOptions = {
            center: new google.maps.LatLng(7.3, 80.6333),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
        map.setOptions({ styles: styles });

        var lineSymbol = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 2,
            strokeColor: '#FF0000'
        };


        var i;
        for (i = 0; i < 50; i = i + 5) {


            var flightPlanCoordinates = [
            new google.maps.LatLng(7.3, 80.6333),
            new google.maps.LatLng(23.772323 + i, -102.214897 - i)];
            var polyline = new google.maps.Polyline({
                path: flightPlanCoordinates,
                icons: [{ icon: lineSymbol, offset: '100%'}],
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 1,
                geodesic: true                  
            });

            polyline.setMap(map);
            animateCircle();
        }
    }

    function animateCircle() {
        var count = 0;
        offsetId = window.setInterval(function () {
            count = (count + 1) % 200;

            var icons = polyline.get('icons');
            icons[0].offset = (count / 2) + '%';
            polyline.set('icons', icons);
        }, 20);
    }

please help me on this one..i would love to see this work :) thank you very much.

Answer 1

Your polyline variable is out of animateCircle function's scope. You have to use closure, getting code out of animateCircle function and pasting it in place of its call should do the trick.

Edit: I messed up closure as usual ;-) You can do it like that (again, untested):

//vars
var poliylines = new Array();

function initialize() {
    //unchanged code

    var i;
    for (i = 0; i < 50; i = i + 5) {
        //unchanged code
        polylines[i] = polyline;
        animateCircle(i);
    }
}

function animateCircle(var id) {
    var count = 0;
    offsetId = window.setInterval(function () {
        count = (count + 1) % 200;

        var icons = polylines[id].get('icons');
        icons[0].offset = (count / 2) + '%';
        polylines[id].set('icons', icons);
    }, 20);
}

Answer 2

Found a simple answer to this problem. I am using google maps api v3. https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

Scroll down below and click on html+javascript tab we have variable lineCoordinates. Here we can pass a set of objects instead of 2 objects like this:

var lineCoordinates = [
new google.maps.LatLng(latitude1, longitude1),
new google.maps.LatLng(latitude2, longitude2),
new google.maps.LatLng(latitude3, longitude3),
new google.maps.LatLng(latitude4, longitude4)
];

The animation will now happen across all objects in lineCoordinates. In this examples case 4 polylines.