Google Maps (JS-v3): How do I make my markers "fall from the sky"

Question

Once I could have sworn I saw a demo of using Google Maps JavaScript API v3 to create an effect where it appeared your map marker icon fell from the sky and landed on the map.

I've searched and searched, including looking at the API, and can't find that example.

Does anyone an more information on how to accomplish this use case?

Thanks

Answer 1

Just extending OverlayView as suggested by giogiga is probably the safest way to go, but it's clearly not the easy way, because Marker has a lot of built-in stuff like icon, shadow, and draggability.

It's really tempting to just extend the Marker class, but that class is opaque - it doesn't reveal its internals, e.g. you can't easily access the underlying DOM elements, which you would need to animate the marker. You could hack together something with setPosition, but the result will be something fragile and buggy. Alternatively you could hack your way into the underlying DOM nodes, but then your could would be even more fragile.

So it seems that completely reimplementing Marker is still the best way to go.

Answer 2

As of the latest 3.3 build, just add Animation: google.maps.Animation.DROP

to your list of properties when creating the marker. It does it all for you. Bouncing is also possible, though I've found that without an easy way to make it bounce just once and stop, it's more trouble than it's worth.