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 · Tags: maps, javascript, google, programming, api

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.


Current Projects

jQuery JavaScript Library

jQuery

Comprehensive DOM, Event, Animation, and Ajax JavaScript Library.

Recent Projects

Pro JavaScript Techniques

JavaScript Book

The best techniques for professional JavaScript. Published by Apress.


Hosting provided by the cool dudes at Engine Yard.