Page Summary
-
This example demonstrates a map with accessible markers that can be navigated using a keyboard.
-
Users can focus on markers using the tab key and cycle through them with arrow keys.
-
Pressing the enter key simulates a click on the focused marker, revealing an info window with its title.
-
The map includes five numbered markers representing different tour stops.
-
The sample code provides implementations in both JavaScript and TypeScript.
This example shows a map with five clickable, focusable markers. To navigate markers using the keyboard, use the tab key to focus on the first marker; if there are multiple markers, use the arrow keys to cycle through them. Press the enter key to "click". Press tab again to continue moving through the rest of the map controls
Read the documentation .
TypeScript
const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; async function initMap () { // Request needed libraries. const { Map , InfoWindow } = ( await google . maps . importLibrary ( 'maps' )) as google . maps . MapsLibrary ; const { AdvancedMarkerElement , PinElement } = ( await google . maps . importLibrary ( 'marker' )) as google . maps . MarkerLibrary ; // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to move // between markers; press tab again to cycle through the map controls. const tourStops = [ { position : { lat : 34.8791806 , lng : - 111.8265049 }, title : 'Boynton Pass' , }, { position : { lat : 34.8559195 , lng : - 111.7988186 }, title : 'Airport Mesa' , }, { position : { lat : 34.832149 , lng : - 111.7695277 }, title : 'Chapel of the Holy Cross' , }, { position : { lat : 34.823736 , lng : - 111.8001857 }, title : 'Red Rock Crossing' , }, { position : { lat : 34.800326 , lng : - 111.7665047 }, title : 'Bell Rock' , }, ]; // Create an info window to share between markers. const infoWindow = new InfoWindow (); // Create the markers. tourStops . forEach (({ position , title }, i ) = > { const pin = new PinElement ({ //@ts-ignore glyphText : ` ${ i + 1 } ` , scale : 1.5 , }); const marker = new AdvancedMarkerElement ({ position , title : ` ${ i + 1 } . ${ title } ` , gmpClickable : true , }); marker . append ( pin ); mapElement . append ( marker ); // Add a click listener for each marker, and set up the info window. marker . addListener ( 'click' , ({ domEvent , latLng }) = > { const { target } = domEvent ; infoWindow . close (); infoWindow . setContent ( marker . title ); infoWindow . open ( marker . map , marker ); }); }); } initMap ();
JavaScript
const mapElement = document . querySelector ( 'gmp-map' ); async function initMap () { // Request needed libraries. const { Map , InfoWindow } = ( await google . maps . importLibrary ( 'maps' )); const { AdvancedMarkerElement , PinElement } = ( await google . maps . importLibrary ( 'marker' )); // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to move // between markers; press tab again to cycle through the map controls. const tourStops = [ { position : { lat : 34.8791806 , lng : - 111.8265049 }, title : 'Boynton Pass' , }, { position : { lat : 34.8559195 , lng : - 111.7988186 }, title : 'Airport Mesa' , }, { position : { lat : 34.832149 , lng : - 111.7695277 }, title : 'Chapel of the Holy Cross' , }, { position : { lat : 34.823736 , lng : - 111.8001857 }, title : 'Red Rock Crossing' , }, { position : { lat : 34.800326 , lng : - 111.7665047 }, title : 'Bell Rock' , }, ]; // Create an info window to share between markers. const infoWindow = new InfoWindow (); // Create the markers. tourStops . forEach (({ position , title }, i ) = > { const pin = new PinElement ({ //@ts-ignore glyphText : ` ${ i + 1 } ` , scale : 1.5 , }); const marker = new AdvancedMarkerElement ({ position , title : ` ${ i + 1 } . ${ title } ` , gmpClickable : true , }); marker . append ( pin ); mapElement . append ( marker ); // Add a click listener for each marker, and set up the info window. marker . addListener ( 'click' , ({ domEvent , latLng }) = > { const { target } = domEvent ; infoWindow . close (); infoWindow . setContent ( marker . title ); infoWindow . open ( marker . map , marker ); }); }); } initMap ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ # map { height : 100 % ; } /* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Advanced Marker Accessibility</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </head> <body> <gmp-map zoom="12" center="34.84555,-111.8035" map-id="4504f8b37365c3d0"></gmp-map> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / advanced - markers - accessibilitynpm inpm start
