The Google Maps API team recently added an eye catching new feature to the Google Maps API v3 which makes it possible to animate markers. This feature has been available in v2 for quite some time and occurs when you drag and drop a marker. It rises the marker up when you drag it and then bounces it into position when you drop it.
The API team however, wasn’t satisfied with just adding what was available in v2. They also added a drop animation similar to the one found in Google Maps on the iPhone. It looks like the marker is being dropped into place from above and then ends with a small bounce.
But they didn’t stop there either. They also added the ability to animate the markers at will. So now we can trigger the animation whenever we feel like it using the setAnimation() method of the Marker object.
Making the markers drop from above
When you create a new marker and want it to drop into place on the map, you can set the animation property of the MarkerOptions object to DROP. The marker will then fall from the sky when added. Also notice that I’ve set the draggable property to true to enables drag and drop functionality.
new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});Triggering an animation
The setAnimation() method takes a constant from the Animation class and can be either BOUNCE or DROP.
To turn an animation on or off you simply call the method on the Marker object:
// Make a marker bouce
marker.setAnimation(google.maps.Animation.BOUNCE);
// Stop the animation by passing null to the method
marker.setAnimation(null);See it in action
I’ve created a demo that demonstrates these new features. It adds markers with a DROP animation and you can then make them dance by triggering the BOUNCE animation. The markers are draggable so you can try dragging them around to see how they behave.
Read more
Be sure to check out the announcement in the article: The map markers! They move! on Google Geo Developers Blog and also check the documentation out.
My Google Maps book
If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com
December 9, 2010 at 7:45 pm
Hi Mr Svennerberg! First, great book (I’m half way through) very clear and concise and great post. I do have one suggestion (for noob readers like myself) if you could for the next book/blog include something on PHP and forms to query MySql to select the markers displayed that would be AWESOME.
I have to hard code the criteria in my database query and I feel stupid I can’t get that user interactivity.
Cheers from Iceland,
Victor
December 9, 2010 at 10:47 pm
@Victor: Thank you very much! Good suggestion! I’ve heard that from a few other people as well. Maybe I should write a blog post about it or put it in my next book (if there will ever be one :-))
December 17, 2010 at 12:29 am
@TheMaestro: If you put it into a blog I will name my children after you 😉
December 26, 2010 at 3:31 am
After reading Gabriel’s book, I code PL/SQL to generate JSON data and work Google maps into an Oracle APEX application. Thanks Gabriel.
– N
December 26, 2010 at 3:32 am
After reading Gabriel’s book, I coded PL/SQL to generate JSON data and work Google maps into an Oracle APEX application. Thanks Gabriel.
– N
January 10, 2011 at 9:45 pm
Gabriel – great book. Read it through on a recent trip to Jamaica over the holidays, and am reading it again.
We are using KML files (created by a conversion of shapefile) with our Google API. Any recommendations where to go for more information? I didn’t see any discussion in your book regarding KML and Google API.
Thank you!
January 12, 2011 at 10:53 pm
Erik Schmidt: Wow, I’m impressed that you’re reading it twice! And I’m glad to hear that you like it!
I haven’t actually used KML that much myself. But I guess the API documentation is a good place to start. Check out KML and GeoRSS Layers int the docs if you haven’t already.
By the way, how was Jamaica?
April 9, 2011 at 8:25 am
Jamaica was awesome! Great trip and beautiful place.
June 30, 2011 at 12:23 pm
I guess your doing something right if Google likes you enough totaly unrelated to what I was searching
July 14, 2011 at 11:14 am
Thank for you code, it help me to understand JS.
Thanks
August 5, 2011 at 5:26 am
This is cool! I will include this feature in my project. 🙂
January 13, 2012 at 6:03 am
First of all I’d like to say how great an application this is! But it would be even better to see listings for shares (rent per room is already quite useful) and all of your cool functionalities for canadian cities.