techno.blog("Dion")

A few of us were laughing at the powerpoint gurus that had fun with animating Google Maps markers for a presentation.

Then I realised that we can of course do animations with the Maps API itself!

I pinged Pamela Fox, who is my goto person for anything Google Map-ish, and with a couple lines of code she made the locations for Google Developer Day spread out.

The tweak took:

Setup the points

The createMarker function now sets up some meta data:

var tempPoint = new GLatLng(37, -122);
var marker = new GMarker(tempPoint, markerOpts);
marker.pt = point;
var latAway = point.lat() - tempPoint.lat();
var lngAway = point.lng() - tempPoint.lng();
marker.latTravel = latAway/50.0;
marker.lngTravel = lngAway/50.0;

Animate the beasts

animateMarkers does the work of moving the marker a little and then calls itself via a setTimeout.

function animateMarkers() {
for (var i=0; i < cm_mapMarkers.length; i++) {
var curMarker = cm_mapMarkers[i];
var curPoint = curMarker.getPoint();
var newPoint = new GLatLng(curPoint.lat() + curMarker.latTravel, curPoint.lng() + curMarker.lngTravel);
cm_mapMarkers[i].setPoint(newPoint);
}

cm_frameNumber++;
if (cm_frameNumber < 50) {
setTimeout(animateMarkers, 20);
}
}

Kick is all off

Then we kick it all off from a simple:

setTimeout(animateMarkers, 1000);

Tweaking the animation

You can mess with the variables for when it starts, how often to redraw (to set the frame-rate), and the amount to move to get different effects. Sometimes on Firefox it stutters. I guess this shows that we don't have a nice concurrent GC as Java 6 does.

Next, we will have hello kitty float randomly around the screen singing in the language of the country.... but in all seriousness, you can do some interesting things on top of the maps. You can even use canvas or SVG.