javascript - Google Marker Drop Animation with Timeout -
i trying create drop animation large quantity of google markers. don't want 300 (or so) markers falling @ once did searching , found 'settimeout' feature.
i have been following instructions question:
animation of google markers on map load timeout
i following same steps in post above can't seem code working in example.
here thought work...
var map = new google.maps.map(document.getelementbyid('map'), { zoom: 6, center: new google.maps.latlng(54.059170, -4.797820), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < locations.length; i++) { marker = new google.maps.marker({ animation: google.maps.animation.drop, position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map, icon: europcmarker, }); (function (i, marker) { google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); }); })(marker, i); if(i++ < nc.length) { settimeout(function() {addmarker(i)}, 100); } } addmarker(0);
my code differs ever post in link mentioned, can't see why shouldn't work regardless.
this working code (drops markers @ once)...
var map = new google.maps.map(document.getelementbyid('map'), { zoom: 6, center: new google.maps.latlng(54.059170, -4.797820), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < locations.length; i++) { marker = new google.maps.marker({ animation: google.maps.animation.drop, position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map, icon: europcmarker, }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); }
javascript can unforgiving, it's hard troubleshoot because if make 1 error map fails display together, i'm @ loss here chaps , chappettes.
any idea i'm doing wrong?
#firstpost :)
this answer based on markers dropping 'rainfall' effect in succession.
based on updated comment, i've updated last jsfiddle reflect clarity of question.
i swapped for
loop , settimeout
lines , used iterator
global variable.
iterator = 0; //setup global iterator go through markers for(var = 0; < locations.length; i++) settimeout( function() { //i can't passed through because, time settimeout executes, == locations.length addmarker(locations); }, * 500); //execute addmarker every 500ms
sorry confusion, documented under google marker animation demo.
Comments
Post a Comment