Google Maps Dissected

Stumble It!

Joel Webber has an excellent dissection of how Google Maps works under the hood in his Mapping Google article. Welcome to my blogroll.

Highlights:

  • Communication with the backend server is done with a hidden <iframe> and some javascript trickery (not with XMLHttpRequest, as Gmail uses).
  • Data arrives from the server in XML and is transformed into HTML by client-side XSLT. This is a bold move, and serves to further demonstrate what can be accomplished in a web browser when you quit obsessing over backwards compatibility. ;)
  • Overlays (”pushpin” graphics, drop-shadows, driving routes) are done with a combination of transparent GIFs and PNGs.
  • Routes are displayed as overlays, fetched from the server via a separate “polyline” element.

I wish that I had time to dig into this more. I could think up all sorts of fun hacks, if I only had the time (especially if the polyline data can be decoded). One thing I might actually try on my own is a bookmarklet to get the precise lat/long coordinates of map locations. You can grab the center lat/long coords from the inputs in the hidden iframe, along with the “span” values that define the boundaries of the displayed map. A little algebra and some onmouseover magic can get you the current coordinates for the map location under your mouse pointer in the browser’s status bar.

Must…find…time…

Stumble It!

2 Comments

  1. There’s been a lot of hoopla surrounding the beta launch of Google Maps, but don’t discount some other web based maps, like Map24 which offers an extremely fluid Java based interface and map.search.ch, a highly accurate detailed road + satellite map of Switzerland, both of which have certain advantages over Google Maps. There’s no doubt Google will step up to the plate, but for the moment they should be looking at both of these innovative web maps for an even more fluid and informative user experience.

    http://www.futurefeeder.com

  2. s a quick bookmarklet that can report the coordinates of the center point of the map currently displayed: GMap Coords Just drag the bookmarklet to your toolbar, then click it when you’re viewing a map. Google Maps Dissected