CODEWITHSUNDEEP
javascriptgoogle-maps
Andrew
Andrew

Reputation: 7768

How do I add the markers to the google maps wth delays

I have a JS array that I receive from another function; I need to loop through it and add markers with delay to the map. Nevertheless, it seems to be skipping to the last marker. I tested the array size and it is good I tested array values in the loop, they are good Marker function (when called without set timeout function in the loop) works fine

<script>
var map;
var PlayDatesArray=new Array();

function playAllHistoryFunction(){   
    timeDelay1=1;       
    for(i=0; i<PlayDatesArray.length; i++) {
        pddtArray = PlayDatesArray[i].split("|"); //split String using | delimiter[date]|[lat]|[lon]   
        lt1=pddtArray[1];
        ln1=pddtArray[2];
        tstamp1= pddtArray[0];
        oldtimeDelay1=timeDelay1;
        newTimeDelay=1500;
        timeDelay1=oldtimeDelay1+newTimeDelay;        
        setTimeout(function(){            
        centerMap(lt1, ln1);
        map.setZoom(14);
        addMarker(lt1, ln1, tstamp1);                
            }, timeDelay1);        
    }
}

function centerMap(lat1, lon1){
    var latlngbounds1 = new google.maps.LatLngBounds(); 
    latlngbounds1.extend(new google.maps.LatLng(lat1, lon1)); 
    map.fitBounds(latlngbounds1);  
}

function addMarker(lat, lng, name){
    var image = new google.maps.MarkerImage('images/icon-home.gif');\
    var mn = new google.maps.Marker({
        map: map,
        icon: image,
        position: new google.maps.LatLng(lat, lng),
        title: name
    });  
    map.setCenter(new google.maps.LatLng(lat, lng));     
}

</script>

Upvotes: 0

Views: 161

Answers (1)

Satyajit
Satyajit

Reputation: 3859

As originally posted in my comment, this is a "closure in a loop" problem. This has been discussed here before and here is a quite decisive response.

Upvotes: 3

Related Questions