Ruby on Rails: To Scale or Not to Scale? Still don’t know! Bob Brewin, CTO at Sun, on Spring
May 23

Google Maps says “Take That” to Powerpoint

Google, Tech Add comments

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.

GDD Animation

3 Responses to “Google Maps says “Take That” to Powerpoint”

  1. Tom Hawtin Says:

    With Opera, it seems to have a problem painting sections of the background map. It does appears in the tab tool tip or after switching too another tab and back, and also where a marker has moved over it.

  2. d4nielchristian Says:

    google, powerful google, i need you so much
    ________________
    Best Video Converter
    http://www.bestvideoconverter.net/

  3. replicahandbags Says:

    google is my favorite serch engine..

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What is the number before 3? (just put in the digit)