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!