I need to add a 1 second delay between each plot of my markers. I came up with the following code but cannot make it work. Any idea ?
var latlng = new google.maps.LatLng(43,2.34);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for ( var i=0, len=json.length; i<len; i++ ){
obj = json[i];
// Get lat / long and put them on the map
var lat = obj.latitude;
var long = obj.longitude;
display_marker(map, lat, long);
}
display_marker = function(map, lat, long){
setTimeout(function(){}, 1000);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat,long),
title: "Latitude: " + lat + "\nLongitude: " + long,
});
}
there a 2 things going wrong right here.
the first one is, that you use the setTimeout with an empty function. your code needs to be inside that function:
the second on is, that your loop triggers the display_marker one after the other, so if you fix problem 1, even then you all your markers will be generated after ~1000ms
an easy way to fix this, is to pass the current value if your increment-var to your display marker, and multiply it for your setTimeout:
hint: see what i did with the variable declarations. you were redeclaring the variables inside your loop
hint2: my code is untested, but it should give you the right idea how to solve your problem