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

Once I could have sworn I saw a demo of using Google Maps JavaScript A开发者_运维百科PI 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

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.

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.

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

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).

Marker animations are now part of v3 API.

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