Google Maps (JS-v3): How to make my markers “fall from the sky”,

Question

As soon as I could swear, I saw a demo version of the Google Maps JavaScript API v3 to create an effect in which, apparently, your map marker icon fell from the sky and landed on the map.

I searched and searched, including looking at the API , and cannot find this example.

Does anyone have more info on how to fulfill this use case?

thanks

Answer 1

The simple OverlayView extension proposed by giogiga is probably the safest way, but it is clearly not an easy way, because Marker has many built-in elements such as icon, shadow and drag and drop.

It is truly tempting to simply extend the Marker class, but this class is opaque - it does not show its internal functions, for example. you cannot easily access the basic DOM elements that you will need to animate the marker. You could hack something with setPosition , but the result would be something fragile and buggy. Alternatively, you could hack your way into the base DOM nodes, but then yours might be even more fragile.

Thus, it seems that completely re-executing Marker remains the best way.

Answer 2

Starting with the latest version 3.3, just add Animation: google.maps.Animation.DROP

to your property list when creating a marker. He does everything for you. A rebound is also possible, although I found that without an easy way to make him bounce only once and stop, this is more of a problem than it's worth.

Answer 3

I don't know much about the Google APIs, but I know that you could do this with simple jQuery

Answer 4

You must implement your own marker class extending google.maps.OverlayView .

Basically, this means implementing 3 methods: onAdd / onRemove (which are good candidates for starting animations) and drawing (which probably should just update the marker position).

Answer 5

Marker animations are now part of the v3 API.

http://code.google.com/apis/maps/documentation/javascript/overlays.html#MarkerAnimations