Enhanced Keyboard-accessible Google Maps

Patrick H. Lauke wrote an excellent article about keyboard-accessible Google Maps on the Opera Developer website. Still I was able to improve it slightly when I implemented an accessible map myself. I would like to share these modifications with you:

  • A link to Google Maps when JavaScript is disabled.
  • Support for the Google AJAX API Loader.
  • Using the small map control.
  • Keyboard accessibility for all control elements within the map.

As a fallback without JavaScript — because people disable it, because their mobile device doesn’t support it, or because it gets filtered by corporate proxies — Patrick used the little known Google Static Maps API, but for some reason he missed adding the link to Google. Here is the fix:

  1. <div id="map">
  2. <a href="http://maps.google.com/maps ?f=q&amp;output=html &amp;q=50.110950+8.684666" title="Google Maps">
  3. <img src="http://maps.google.com/staticmap?hl=en &amp;center=50.112267,8.678384 &amp;markers=50.110950,8.684666,red &amp;zoom=15&amp;size=500x300 &amp;key=[Your API Key]" alt="City map of Frankfurt" width="500" height="300" />
  4. </a>
  5. </div>

City Map of Frankfurt

Then I changed how the map is embedded. As it seems that the API loader is more current, I preferred that way:

  1. <script type="text/javascript" src="http://www.google.com/jsapi?key=[Your API Key]"></script>
  2. <script type="text/javascript" src="/js/accgmap.js"></script>
  3. <script type="text/javascript">
  4. google.load( 'maps', '2', { 'language' : 'en' } );
  5. google.setOnLoadCallback( GMAP.initMap );
  6. </script>

Using the small control elements is trivial: SmallMapControl(). The next thing I wanted to change was keyboard access to all controls, in particular for the map type, i.e. Map | Satellite | Hybrid. Patrick refers to an id, but I found that all relevant controls have a title, so I just checked for that attribute. I also dropped setting the style attribute in JavaScript as that belongs in the CSS file. His original function GKeyboardPatch() now looks like this (note the while loop for a slightly better performance):

  1. GKeyboardPatch: function( map ) {
  2. var button, divs = map.getContainer().getElementsByTagName( 'div' );
  3. var i = 0;
  4. while ( divs[i] ) {
  5. if ( divs[i].getAttribute( 'log' ) || ( divs[i].getAttribute( 'title' ) && divs[i].getAttribute( 'title' ) != '' ) ) {
  6. button = document.createElement( 'button' );
  7. button.setAttribute( 'value', divs[i].getAttribute( 'title' ));
  8. divs[i].appendChild( button );
  9. if ( divs[i].getAttribute( 'log' )) { // only control buttons
  10. // override the IE opacity filter that Google annoyingly sets
  11. divs[i].style.filter = '';
  12. // should really set to 'transparent'
  13. divs[i].style.background = 'url( http://www.google.com/ intl/en_ALL/mapfiles/transparent.png )';
  14. }
  15. }
  16. i++;
  17. }
  18. }

Now remember I said I’d rather separate style and behaviour, so here are a some lines of CSS with the setting of width and height for the #map being most relevant, otherwise it will collapse:

  1. #map {
  2. height: 300px;
  3. overflow: hidden;
  4. position: relative;
  5. width: 500px;
  6. }
  7. #maps-static, #maps-static img {
  8. display: block;
  9. }
  10. #map span.note {
  11. display: none;
  12. }
  13. #map button {
  14. background: transparent;
  15. border-style: solid;
  16. border-width: 0;
  17. cursor: pointer;
  18. height: 100%;
  19. left: -2px;
  20. margin: 2px;
  21. overflow: hidden;
  22. padding: 2px;
  23. position: absolute;
  24. text-indent: -100em;
  25. top: -2px;
  26. width: 100%;
  27. }
  28. #map a:focus, #map a:active, #map button:focus, #map button:active {
  29. outline: 2px dashed #61bf1a;
  30. }

And that’s it, thanks again to Patrick for the solid foundation I built upon. Now download the JavaScript code and try to tab through the map below.

Actually on the other website I extracted hCard microformats from the page as well and displayed the addresses on the map, but I was lazy and used jQuery. I thought it doesn’t look well here mixed with Patrick’s clean DOM scripting, but feel free to take it from the original website.

City Map of Frankfurt

One Response to ‘Enhanced Keyboard-accessible Google Maps’

  1. Patrick H. Lauke

    Nice one… darn, I must get around to doing my follow-up article at last. One small note: I didn’t originally have the link to Google Maps itself in the fallback, because I thought if the users have JavaScript disabled, going to the Maps site itself won’t help them much more either… but I see what you did there linking to the half-interactive HTML variant. Very neat indeed.