Fallback Content and Google Maps API Version 3

I recently worked on a site for mobile devices that uses the Google Maps JavaScript API.  It was a pleasure to integrate and produced great results, but inevitably, we needed to have a fallback mechanism for users whose devices did not support Google Maps, or did not have JavaScript support at all.  (Currently the API only works on Android and iPhone devices.)

Back in API version 2, there was a GBrowserIsCompatible() function that one could use to detect compatibility. It’s not available in the version 3 API. In addition, that method was not useful for devices with no JavaScript support.

<noscript> Fallback

For my first attempt at solving the problem, I used <noscript> tags to provide content for scriptless browsers:

<noscript>
  <p>This content will show up when the browser has no JS support.</p>
</noscript>

As you can deduce, this only solves half of the problem.  The use of <noscript> has other problems as well – it somewhat violates the concept of “progressive enhancement” of websites, which involves using JavaScript to add additional functionality over the base content.  (In my case, the base content right now is a message that says “sorry, you can’t see our maps.”)

Progressive Enhancement

As I thought about the problem in this context, I realized that the solution should be simple.  The Google Maps API already provides a progressive enhancement mechanism, but I wasn’t taking advantage of it.  Your basic Google Maps example looks like this (mostly blatantly copied from the documentation):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(41.83, -111.83);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

The basic premise here is that the API replaces the content of the map_canvas container with the map display.  So, why not just add some fallback content to that container?

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%">
    <p>Sorry, your device does not support this feature.</p>
  </div>
</body>

Does it Work?

This seems to be a good generic solution to the fallback problem.  I tried it in the following scenarios:

  • Browser supporting Google Maps – the map displays correctly, and the fallback content is not shown.
  • Browser with JavaScript turned off – the fallback content is never replaced, and shows as expected.
  • Browser without Google Maps API loaded (to emulate a non-supported device) – the fallback content is never replaced.

Looks good so far!  I’ll update this post if anything comes up later.

This entry was posted in Code and tagged , , . Bookmark the permalink.

2 Responses to Fallback Content and Google Maps API Version 3

  1. Baumr says:

    Your article was helpful, but has anything changed since 2010? Take a look at the StackOverflow question that I linked to in my name.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>