Dougal Campbell's geek ramblings

WordPress, web development, and world domination.

Google Maps Dissected

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


  • 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.


About Dougal Campbell

Dougal is a web developer, and a "Developer Emeritus" for the WordPress platform. When he's not coding PHP, Perl, CSS, JavaScript, or whatnot, he spends time with his wife, three children, a dog, and a cat in their Atlanta area home.
This entry was posted in Geolocation, Maps, Search, Software, Tech and tagged , , , , , , , , . Bookmark the permalink.

2 Responses to Google Maps Dissected

  1. Pingback: Blogs emploi : annuaire et actu

Leave a Reply

%d bloggers like this: