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);
}