By Simon Willison

Fun with Google Maps

By Simon Willison

Google Maps launched a couple of weeks ago, and is another dramatic victory for dynamic web applications. If you haven’t seen it yet, go check it out (IE/Windows or Firefox/Mozilla only at the moment, but Safari support is “coming soon”). It’s a really impressive piece of work, with the main “wow” factor coming from the dynamic panning – just drag and drop to move around the map, with new map tiles loading seamlessly in the background.

Other features include smart route plotting (search for washington dc to chicago for an example), keyboard navigation and integrated search results from Google Local. It’s already giving established map sites a run for their money, with its only real weakness being a complete lack of coverage of areas outside of North America.

But how does it work? Look under the hood and you’ll find a surprising mix of technologies. Remote scripting (communicating with the server without reloading the page) is achieved using both XMLHttpRequest and invisible iframes, with the iframes used because unlike XMLHttpRequest they integrate sensibly with the user’s back button. Add to that both XSLT and VML (Microsoft’s SVG alternative, introduced before the SVG specification was standardised) and you’ve got one of the most advanced web applications I’ve ever seen on the public internet.


jgwebber has an excellent dissection of the client-side bits, and there’s a thread on my other blog discussing some of the inner workings.

Figuring out how it works is only the half of it; there’s a growing collection of hacks for the service. Jon Udell pointed out a hidden XML interface to the underlying data, which has now been discontinued. Even better, the libgmail project has posted a number of bookmarklets which directly manipulate Google Maps, including some which can animate the routes suggested by the service (see Jon Udell’s screencast). They’re great fun to play with and reveal even more details about the JavaScript API. The Google Maps tile grabber is fun as well.

It’s all exciting stuff, but I can’t help but feel slightly concerned. For all its bells and whistles, Google Maps is similar to GMail in that it remains completely inaccessible without a modern, JavaScript-enabled desktop browser. Building applications like this that gracefully degrade may be harder but it’s certainly not impossible, as smartly demonstrates. I hope that in the exciting new gold rush towards truly dynamic web applications recent advances in the fields of accessibility (both for users and platforms) are not forgotten.

  • Does Google hate Opera? I’m guessing that it won’t ever work in Opera, even if it is a modern, JavaScript-enabled desktop browser

  • Aankhen

    Opera (uptil and including 7.54) doesn’t support XmlHttpRequest, and Google isn’t all that great at providing JavaScript-less fallbacks in beta software. :-) Atleast, not to the best of my knowledge.

    You might have to wait till Opera 8.

  • Mark Wubben

    charmedlover, Opera’s JavaScript is still tricky, even though it has seen some great improvements since the early 7.x versions. The most reliable JavaScript support is in IE5.5+ and Gecko.

  • Why would google hate Opera? I think they have more reasons for hating Internet Explorer. Plus, they’re not making a statement. If they supported Opera and dropped IE-support THEN they would be making a statement :)

  • “complete lack of coverage of areas outside of North America” is an exaggeration

    it worked fine for toronto canada from day 1

  • aargh, i am an idiot, you did say North America


  • have a look at, very nice close view, and IMHO a better control.

  • Jeremy Dunck

    I originally volunteered for Matt May’s WCAG “accessible javascript” group, but (sadly) never contributed anything.

    Here’s his original pitch:

    Moreover, I didn’t see much actual work or discussion from the other members over a long period of time, either.

    I don’t mean to cast aspersions; I mean to draw attention to an area that really needs help badly.

    If you (reader) think you could help develop and popularize methods of creating accessible content via javascript, please get in contact with Matt: mcmay w3 org

  • Regardless of its browser support, it is still a beta application and as such should be treated as one. Still very cool though.

  • The beta label really doesn’t mean anything – Google News has been in beta for years (although there’s a strong argument that that’s simply because a full “launch” would upset the copyright holders of the material it aggregates), and the sames goes for GMail, Google Groups, Froogle and Google Local – in fact, half of their product offerings seem to be in beta!

  • Randy Charles Morin

    Thanks! Very good article.

  • ben332211

    Hey, Google Maps is cool!

    You are forgetting us folks in England… It _does_ work here too. :)

    I could zoom in right to my street… ;) (Didn’t try a route or anything though)

  • Pingback: Emerging Earth » Web Events of 2005: Google Makes AJAX Mainstream()

  • abram

    I’ve created a site using javascript that does the panning like Google maps, except on a matrix of screenshots. Those who are interested in checking it out can go to The Web Showcase

  • hartford

    beautiful online information center. greatest work… thanks

Get the latest in JavaScript, once a week, for free.