In usability we trust

UX and all things web

Dancing markers

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

12 Comments

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

  2. @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 :-))

  3. @TheMaestro: If you put it into a blog I will name my children after you 😉

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

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

  6. 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!

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

  8. Jamaica was awesome! Great trip and beautiful place.

  9. I guess your doing something right if Google likes you enough totaly unrelated to what I was searching

  10. Thank for you code, it help me to understand JS.

    Thanks

  11. This is cool! I will include this feature in my project. 🙂

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

Leave a Reply to Trucs Cancel reply

Your email address will not be published.

*