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')!; async function init() { // Request needed libraries. const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] = await Promise.all([ google.maps.importLibrary('maps'), 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({ 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.addEventListener('gmp-click', () => { infoWindow.close(); infoWindow.setContent(marker.title); infoWindow.open(marker.map, marker); }); }); } void init();
JavaScript
const mapElement = document.querySelector('gmp-map'); async function init() { // Request needed libraries. const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] = await Promise.all([ google.maps.importLibrary('maps'), 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({ 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.addEventListener('gmp-click', () => { infoWindow.close(); infoWindow.setContent(marker.title); infoWindow.open(marker.map, marker); }); }); } void init();
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>
<script>
// prettier-ignore
(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: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<gmp-map
zoom="12"
center="34.84555,-111.8035"
map-id="4504f8b37365c3d0"></gmp-map>
</body>
</html>Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. You will also need a Google Maps API key.
The following commands clone the repository, install dependencies, and copy the environment file.
git clone https://github.com/googlemaps-samples/js-api-samples.gitcd js-api-samplesnpm icp .env.template .env
Once you copy the environment file, make sure to open the .env file and replace <Insert your own development API key here> with your actual API key before starting the sample.
cd samples/advanced-markers-accessibilitynpm start