I have a fairly large (~ 1,300) set of markers that I place on the map on a timeline. Basically, this is similar to playing a video, where in time sequence the markers are placed using google.maps.Animation.DROP on the map. We have standard video / audio player controls that allow you to navigate the timeline: play / pause, skip, start, skip to the end and the scrubber panel to move arbitrarily within the timeline.
If I start with an empty map, and the timeline pauses at the beginning, and then ends there, there is a short delay, since all these marker objects are created, and then they all fall onto the map together. This is normal.
Once the marker has been placed and the user moves backward in the timeline (to the point where the particular marker will no longer be visible), I do marker.setMap(null) and the marker is hidden. From what I read , this is the correct way to remove a marker and it works.
A big problem appears if you create / discard all (or a large number) of markers, and then go to the timeline (to remove a large number of markers), and then move forward again. This creates an unpleasant flash of contacts on the card, which then disappears and suddenly falls from the top of the card.
As already mentioned, the correct effect (falling fingers without appearing on the map in advance) occurs with the first when the pins fall, but subsequent drops cause this odd behavior. For small numbers of pins, it is largely invisible, but with a large number of pins it is much more distracting.
It looks like there should be something in the internal state of the marker that marker.setMap(null) does not really reload, but I'm not at all sure what it could be.
I initially created new markers as needed, and then destroyed them when they disappeared, but this overhead made things sluggish. In theory, I feel that my approach should work everywhere, but I basically get one good shot with the right effect, and the repetitions behave badly.
Does anyone see something that I am doing wrong, or have suggestions on how to do this?
The logic that adds pins, shows and skins looks something like this:
Realtime.prototype.placePin = function(ent) { var ctxt = this; ent.latLng = new google.maps.LatLng(ent.lat, ent.lng); ent.marker = new google.maps.Marker({ position: ent.latLng, map: null, animation: google.maps.Animation.DROP, optimized: false }); }; Realtime.prototype.tick = function(force_tick) { var ctxt = this; if ((!ctxt.playing || ctxt.dragging) && !force_tick) { return; } else { ctxt.time += ctxt.per_tick; } ctxt.nowDate = new Date(ctxt.time * 1000); ctxt.pins_to_drop = []; for (var i = 0, l = ctxt.entries.length; i < l; i++) { var ent = ctxt.entries[i]; var ent_date = new Date(ent.created + ' UTC'); if (ent_date < ctxt.nowDate) { if (!ent.marker || ent.marker.map == null) { if (!ent.marker) { ctxt.placePin(ent); } ctxt.pins_to_drop.push(ent); } } else { if (ent.marker && ent.marker.map != null) { ent.marker.setMap(null); } } } ctxt.updateUI(); }; Realtime.prototype.updateUI = function() { var ctxt = this; for (var i = 0, l = ctxt.pins_to_drop.length; i < l; i++) { var ent = ctxt.pins_to_drop[i]; ent.marker.setMap(null); ent.marker.setAnimation(google.maps.Animation.DROP); ent.marker.setMap(ctxt.map); } };