WIP collaboration to make a keyboard- and screen reader-accessible shim for the Google Maps API.
WIP collaboration to make a keyboard- and screen reader-accessible shim for the Google Maps API.
To implement:
## Requirements
1. Load accessible_gmaps.js and accessible_gmaps.css into any page containing a Google map. jQuery is also (currently) required.
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.
2. When creating markers or adding new markers to the map, call accessibility_addMarker(marker), where marker is the marker object.
Each marker object should have a title attribute 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.
## Installation
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:
To add the shim to your project:
map: the map object (created with new google.maps.Map())
1. Load accessible_gmaps.js and accessible_gmaps.css into any page containing a Google map. Remember that jQuery is also required.
mapIdentifier: a CSS identifier unique to your map, used by jQuery to add the shim elements.
2. When creating markers or adding new markers to the map, call accessible_gmaps_addMarker(marker), where marker is the gMaps marker object.
options: an array of settings for the shim. Current options are:
*Each marker object should have a title attribute 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.*
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).
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:
\ No newline at end of file
+**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).*
