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…
Pingback: Blogs emploi : annuaire et actu