Google Maps has a very clever system to draw lines onto its maps, such as when you want driving directions. Unlike just about every other system, Google Maps does not draw the line directly on the map itself. It gets your browser to do that, using various tricks.

This means you can play a trick of your own: get Google to draw lines of your choosing. Here’s a perl script that demonstrates how: google-draw.pl.

How Google Maps’ path-drawing works

First Google calculates some path – a series of (x,y) coordinates.

(10,10),(30,30),(5,20),(10,10)

Then it turns that into a string of characters:

SSg@g@p@RIR}oR

(Read google-draw.pl for the details.)

Then Google Maps sends this string to your browser along with all the scripts that make the page so dynamic. Those scripts do different things depending on whether you are running Internet Explorer or another browser. When it’s Internet Explorer, the line will be rendered right in the browser, via a little-used vector graphics technology that’s built into IE, called VML.

There’s no similar technology built into Firefox or other browsers. So the scripts will instead request a transparent PNG from the server, using a URL like this:

http://www.google.com/maplinedraw?width=40&height=40&path=SSg@g@p@RIR}oR

For instance, here’s a a circle. And a 12-pointed star.

Feedback

Initial reactions were mixed:

Jamie Zawinski: I am experiencing a strange kind of cognitive dissonance here. One the one hand, that’s really cool, and on the other, I can’t think of a single thing to do with it. I mean, it’s less useful than ringing the bell on a teletype. It’s pulling my brain apart.

At the time, I agreed – but since then. the code’s been used as a sort of guide for others to do some pretty cool things. The obvious application (which I totally missed at the time!) is to annotate your own maps.

Jon Udell used the code to do a walking tour of his home town.

Adrian Holovaty used it to draw ZIP code maps at chicagocrime.org – for example, here’s 60614.

More info

• The GoogleMapsHackingWiki wiki collects lore, at least in early 2005.
• Joel Webber posted some dissections of Google Maps (1, 2)
• Chris Smoak wrote a tool to draw polygons with mouse clicks. Using Google Maps as the renderer is inspiringly useless, but the code to draw the polygons has many applications. (Firefox only).

Future

It’s a rather neat hack to replace VML with a PNG. However, Firefox 1.1, due out sometime soon, will also have vector graphics built-in, in a more powerful and more standardized form – SVG. So things here may get rather interesting.