Skip to content
Snippets Groups Projects
rabyrd's avatar
Elijah Byrd authored
Small performance improvements to accessible_gmaps_getMarkerPos() by refactoring code into accessible_gmaps_getMapData
2d88a24e
History

Accessible Google Maps shim

WIP collaboration to make a keyboard- and screen reader-accessible shim for the Google Maps API.

Requirements

The shim currently requires jQuery (referenced as 'jQuery,' most versions should work fine). You can probably modify pretty easily to work with your library of choice.

Installation

To add the shim to your project:

  1. Load accessible_gmaps.js and accessible_gmaps.css into any page containing a Google map. Remember that jQuery is also required.
  2. When creating markers or adding new markers to the map, call accessible_gmaps_addMarker(marker), where marker is the gMaps marker object.
    Each marker object should have a title property attached. This string is used by base gMaps to provide title text for markers, and is used by the accessibility shim to provide information about the marker to screen readers. Set this property with marker.title='your title here'
  3. After your map is loaded and has bounds (usually just before you'd display it to the user), call accessible_gmaps_onload(map, mapIdentifier, options) with these parameters:
    • map: the map object (created with new google.maps.Map())
    • mapIdentifier: a CSS identifier unique to your map, used by jQuery to add the shim elements.
    • options: an array of settings for the shim. Current options are:
      • infowindows: if set to TRUE, will create keyboard-accessible infowindows attached to map markers.
        This option expects each marker object to have a windowContent property, which contains an HTML string to use as the infowindow content (minus the window header, which is automatically generated from the marker's title attribute). Set this property with marker.windowContent='your content here'