Polyline Animation Demo

Like others before me I'm interested in overlaying GPS tracks from my
bicycle rides. I also want to animate these tracks to simulate a
"virtual" ride.

Of the various methods I've tried it turns out the simplest approach
is the one that is also the most effective. I create a small opaque
view window at the center of the map, and then transverse the polyline
data array and recursively call recenterOrPanToLatLng for each point.
This gives the illusion of a small looking-glass window scanning over
the polyline from one end to the other - exactly the effect I want.

This is demonstrated at http://www.sonic.net/~jerrysch/gmap/animate/
and works best with Internet Explorer. Click on the 'animate' link
above the map to get the ball rolling.

Javascript is not my native language so the source should be viewed as
a concept and not a coding example <grin>. For example, a transparent
PNG of a round cross-hair placed over the center of the map is probably
a better (and simpler) solution.

A word about the polyline data. My GPS track logs tend to contain many
points (the demo polyline has 1864 points spanning 101 miles) and will
choke the browser if not filtered in some fashion. Again, I have
adapted a simple approach of just breaking the track into multiple
polylines with a maximum of 200 points each. Works well and assures
that the track overlay always nicely cover the actual road shapes
displayed by google maps at any zoom levels.

I wanted to keep this demo simple, but animation speed should be
controlled as a function of zoom level. As you zoom in the speed can
be too fast. So the delay parameter in the recursive
setTimeout("moveCenter()", delay) call should be a function of zoom
level. As you zoom out animation can get too slow. This can be solved
by skipping some points (for example, requiring a minimum distance
between points) while transversing the polyline data array.

Cheers,

Jerry Schonewille