Back in API version 2, there was a
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 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):
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 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.