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

Document

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.

Fight

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.

Lieberman

Answer 3

I don't know much about the Google API, but I know you could do this with just plain jQuery

Robin

That doesn't work. See this post as to why: #1678912 – Document

Um... I don't see anywhere on that post that says anything about that not working... – Robin

I can't link to a StackOverflow comment but on that page it says "This won't work in V3, only V2. V3 has no bouncyness, in fact the marker doesn't even pick up off the page. – Chris Drackett Jun 29 at 21:34" – Document

Answer 4

You should implement your custom marker class extending google.maps.OverlayView.

Basically that amounts to implement 3 methods: onAdd/onRemove (which are good candidates for starting animations) and draw (which should probably just update the marker position).

Studley

Answer 5

Marker animations are now part of v3 API.

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

Rms