One Week of Google Maps – Part 6

This is Part 6 of a week long series featuring code for the Google Maps API.

The theme for today is Animation (per the request of Ralph). For programmers who want to make a walkthrough of their town, or a tutorial – play-by-play animation is an important feature to have – and one that is missing from the default API.

I’ve added the functionality to the API such that you can animate the user’s map view based upon:

  • An array of points.
  • An array of markers.
  • An array of markers and points.
  • A Polyline.

In addition to this, if you wish to use markers in your animation – and if you’ve bound a function to the “click” event of the marker – then that click will be triggered, displaying an info window (for example).

Using all of these features together, in tandem, you can create a pretty convincing slideshow. To see a demo of the animation at work, click here.

To interface with this, here is the function that you need to call:

map.animate( points, closeFunction, pointWait, markerWait );

points – is a GPolyline or an Array of GMarkers and/or GPoints.
closeFunction (optional) – this function will be called whenever the animation has been completed.
pointWait – this is the amount of time to wait at a point (or a marker without a ‘click’ event). The default is 3000 milliseconds.
markerWait – if you’ve bound a function to the click event of a marker then this is how long you wish to wait (for example, if you want to give a user time to read an Info Window). The default is 6000 milliseconds.

To use the above code, simply include this file in the header of your code – after you’ve included your Google Map API file – and you should be ready to go! Happy animating!

Posted: August 18th, 2005


Subscribe for email updates

5 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.