CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Mr. J
Mr. J

Reputation: 317

Google Marker Drop Animation with Timeout

I am trying to create a DROP animation for a large quantity of Google Markers. I don't want 300 (or so) markers falling at once so I did some searching and found the 'setTimeout' feature.

I have been following the instructions from this question:

Animation of google markers on map load with timeout

I am following the same steps as in the post above but can't seem to get the code working in my example.

Here is what I thought would 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;

for (i = 0; i < 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 so slightly to the post in the link I mentioned, but I can't see why it shouldn't work regardless.

This is my working code (Drops all markers at 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;

for (i = 0; i < 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 be very unforgiving, It's hard to troubleshoot because if you make one error the map fails to display all together, I'm really at a loss here chaps and chappettes.

Any idea what I'm doing wrong?

#firstpost :)

Upvotes: 2

Views: 3226

Answers (2)

Sunny Patel
Sunny Patel

Reputation: 8077

This answer is based on markers dropping with a 'rainfall' effect in succession.

Based on your updated comment, I've updated the last JSFiddle to reflect your clarity of the question.

I basically swapped the for loop and setTimeout lines and used the iterator as a global variable.

iterator = 0; //Setup global iterator to go through markers
for(var i = 0; i < locations.length; i++)
    setTimeout( function() {
        //i can't be passed through because, by the time setTimeout executes, i == locations.length
        addMarker(locations);
    }, i * 500); //Execute addMarker every 500ms

Sorry for any confusion, this is all documented under the Google Marker Animation Demo.

Upvotes: 1

Sunny Patel
Sunny Patel

Reputation: 8077

This answer is based on OP's original question to drop all markers simultaneously after a set time

I've updated the JSFiddle with the fixes. Just like Google Marker Animation Demo, you just needed to add a set timeout for the part which instanciates the markers to the map.

I wrapped that key part inside an anonymous function, and called that 1 second after DOM and Google Maps API were ready using google.maps.event.addDomListener(window, 'load', initialize ); at the end.

Upvotes: 1

Related Questions