Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Make markers clickable and accessible

  • 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 navigatemarkers using the keyboard, use the tab key to focus on the first marker; ifthere are multiple markers, use the arrow keys to cycle through them. Pressthe enter key to "click". Press tab again to continue moving through the rest ofthe map controls

Read thedocumentation.

TypeScript

constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;asyncfunctioninitMap(){// Request needed libraries.const{Map,InfoWindow}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;const{AdvancedMarkerElement,PinElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.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.consttourStops=[{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.constinfoWindow=newInfoWindow();// Create the markers.tourStops.forEach(({position,title},i)=>{constpin=newPinElement({//@ts-ignoreglyphText:`${i+1}`,scale:1.5,});constmarker=newAdvancedMarkerElement({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();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

constmapElement=document.querySelector('gmp-map');asyncfunctioninitMap(){// Request needed libraries.const{Map,InfoWindow}=awaitgoogle.maps.importLibrary("maps");const{AdvancedMarkerElement,PinElement}=awaitgoogle.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.consttourStops=[{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.constinfoWindow=newInfoWindow();// Create the markers.tourStops.forEach(({position,title},i)=>{constpin=newPinElement({//@ts-ignoreglyphText:`${i+1}`,scale:1.5,});constmarker=newAdvancedMarkerElement({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();
Note: The JavaScript is compiled from the TypeScript snippet.

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 theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclonehttps://github.com/googlemaps-samples/js-api-samples.gitcdsamples/advanced-markers-accessibilitynpminpmstart

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.