Unobtrusive Google Maps

When developing web applications we can never be sure what the environment for the user is. He could for example use our application from a mobile device with a browser with limited Javascript support. Like Roger Johansson pointed out in Making Google Maps more accessible, we must prevent our applications from breaking under these circumstances by making them degrade gracefully.

In this article I will show you how to make Google Maps degrade gracefully by providing a fallback for non-javascript users using the Google Static Maps API.

The map switch

The technique is simple. First you have a Google Static Map on your web page, which in fact is a static image. If Javascript is enabled, the static image is overwritten with a dynamic map.

A Static Google Map is simply an ordinary image, dynamically created at Google and displayed on your webpage. You decide how it will appear by passing arguments in the querystring of the image URL. A sample URL could look like this:

http://maps.google.com/staticmap?center=59.1,14.0&zoom=6&size=420x300&key=YOUR_KEY_HERE

This URL will generate a map that look like this:

From this example it’s quite easy to see the different arguments in the query string:

  • center
    Defines the center of the map with a coordinate (x, y)
  • zoom
    Sets the zoom-level (1-18)
  • size
    Defines the size of the map in pixels (width x height)
  • key
    Your Google Maps API key. Note that in the example URL the key is omitted. If you don’t already have one you can sign up for one for free.

The switch

This is easy as pie. Just do as normal. The only difference is that you put an image with the static map inside the <div> for the dynamic map. If the dynamic map is loaded it will automatically replace the content of the <div>.

The HTML will look like this:

<div id="map">
    <img src="http://maps.google.com/staticmap?center=59.1,14.0&zoom=6&size=420x300&key=YOUR_KEY_HERE" alt="" />
</div>

And the Javascript will look something like this:

window.onload = function(){
    if (GBrowserIsCompatible()) {
        // Init the map
        var map = new GMap2(document.getElementById('map'));
        map.setCenter(new GLatLng(59.5, 14.0), 6);
    }
}

And there you have it! A map that degrades gracefully if the user lacks Javascript support.

Note: To avoid that the switch appears as a flicker in the browser I recommend using a DOM-loader that executes after the DOM has been loaded. All major Javascript libraries like jQuery and Prototype has these.

Live example

I’ve constructed an example page to show the concept. In the example I also add markers to the map. To learn how to do this read the article Simple maps with the Google Static Maps API.

Try the live example

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

About the author

Gabriel Svennerberg is an UX Designer and FrontEnd Developer living in Sweden. When he's not busy designing or building applications at Meetod, he writes about UX Design and all things web on In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress. Gabriel on Google+
  • Pingback: Pages tagged "unobtrusive"

  • Operator IV

    Your example at http://www.svennerberg.com/examples/unobtrusive_google_maps/ is opening different locations with and without JS in some browsers. The spaces after the commas in the static version are becoming %20, messing with the coords.

    e.g. 59.73, 13.12 becomes 59.73,%2013.12

    If you remove the spaces, all goes perfect.

  • http://www.svennerberg.com Gabriel Svennerberg

    Operator IV Thanks for the tip! I’ve changed the demo now. Just out of curiosity, which browsers did it fail in?