Stay organized with collectionsSave and categorize content based on your preferences.
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
asyncfunctioninitMap(){// Request needed libraries.const{Map,InfoWindow}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;const{AdvancedMarkerElement,PinElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;constmap=newMap(document.getElementById("map")asHTMLElement,{zoom:12,center:{lat:34.84555,lng:-111.8035},mapId:'4504f8b37365c3d0',});// 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({glyph:`${i+1}`,scale:1.5,});constmarker=newAdvancedMarkerElement({position,map,title:`${i+1}.${title}`,content:pin.element,gmpClickable:true,});// 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();
asyncfunctioninitMap(){// Request needed libraries.const{Map,InfoWindow}=awaitgoogle.maps.importLibrary("maps");const{AdvancedMarkerElement,PinElement}=awaitgoogle.maps.importLibrary("marker");constmap=newMap(document.getElementById("map"),{zoom:12,center:{lat:34.84555,lng:-111.8035},mapId:'4504f8b37365c3d0',});// 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({glyph:`${i+1}`,scale:1.5,});constmarker=newAdvancedMarkerElement({position,map,title:`${i+1}.${title}`,content:pin.element,gmpClickable:true,});// 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();
/** 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;}
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.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis example demonstrates a map with accessible markers that can be navigated using a keyboard.\u003c/p\u003e\n"],["\u003cp\u003eUsers can focus on markers using the tab key and cycle through them with arrow keys.\u003c/p\u003e\n"],["\u003cp\u003ePressing the enter key simulates a click on the focused marker, revealing an info window with its title.\u003c/p\u003e\n"],["\u003cp\u003eThe map includes five numbered markers representing different tour stops.\u003c/p\u003e\n"],["\u003cp\u003eThe sample code provides implementations in both JavaScript and TypeScript.\u003c/p\u003e\n"]]],["This code creates a map with five interactive markers. Users can navigate these markers using the tab key to focus on the first marker and arrow keys to cycle through the rest, pressing enter to \"click.\" Each marker, defined by position and title, displays an info window upon being clicked. The map and markers are built using the Google Maps JavaScript API and its libraries, and the markers are styled as numbered pins. The sample application can be run locally using Git, Node.js and npm.\n"],null,["This example shows a map with five clickable, focusable markers. To navigate\nmarkers using the keyboard, use the tab key to focus on the first marker; if\nthere are multiple markers, use the arrow keys to cycle through them. Press\nthe enter key to \"click\". Press tab again to continue moving through the rest of\nthe map controls\n\nRead the\n[documentation](/maps/documentation/javascript/advanced-markers/accessible-markers#make_a_marker_clickable). \n\nTypeScript \n\n```typescript\nasync function initMap() {\n // Request needed libraries.\n const { Map, InfoWindow } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n\n const map = new Map(document.getElementById(\"map\") as HTMLElement, {\n zoom: 12,\n center: { lat: 34.84555, lng: -111.8035 },\n mapId: '4504f8b37365c3d0',\n });\n\n // Set LatLng and title text for the markers. The first marker (Boynton Pass)\n // receives the initial focus when tab is pressed. Use arrow keys to move\n // between markers; press tab again to cycle through the map controls.\n const tourStops = [\n {\n position: { lat: 34.8791806, lng: -111.8265049 }, \n title: \"Boynton Pass\"\n },\n {\n position: { lat: 34.8559195, lng: -111.7988186 }, \n title: \"Airport Mesa\"\n },\n {\n position: { lat: 34.832149, lng: -111.7695277 }, \n title: \"Chapel of the Holy Cross\"\n },\n {\n position: { lat: 34.823736, lng: -111.8001857 }, \n title: \"Red Rock Crossing\"\n },\n {\n position: { lat: 34.800326, lng: -111.7665047 }, \n title: \"Bell Rock\"\n },\n ];\n\n // Create an info window to share between markers.\n const infoWindow = new InfoWindow();\n\n // Create the markers.\n tourStops.forEach(({position, title}, i) =\u003e {\n const pin = new PinElement({\n glyph: `${i + 1}`,\n scale: 1.5,\n });\n const marker = new AdvancedMarkerElement({\n position,\n map,\n title: `${i + 1}. ${title}`,\n content: pin.element,\n gmpClickable: true,\n });\n // Add a click listener for each marker, and set up the info window.\n marker.addListener('click', ({ domEvent, latLng }) =\u003e {\n const { target } = domEvent;\n infoWindow.close();\n infoWindow.setContent(marker.title);\n infoWindow.open(marker.map, marker);\n });\n });\n}\n\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/samples/advanced-markers-accessibility/index.ts#L8-L75\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nasync function initMap() {\n // Request needed libraries.\n const { Map, InfoWindow } = await google.maps.importLibrary(\"maps\");\n const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(\"marker\");\n const map = new Map(document.getElementById(\"map\"), {\n zoom: 12,\n center: { lat: 34.84555, lng: -111.8035 },\n mapId: '4504f8b37365c3d0',\n });\n // Set LatLng and title text for the markers. The first marker (Boynton Pass)\n // receives the initial focus when tab is pressed. Use arrow keys to move\n // between markers; press tab again to cycle through the map controls.\n const tourStops = [\n {\n position: { lat: 34.8791806, lng: -111.8265049 },\n title: \"Boynton Pass\"\n },\n {\n position: { lat: 34.8559195, lng: -111.7988186 },\n title: \"Airport Mesa\"\n },\n {\n position: { lat: 34.832149, lng: -111.7695277 },\n title: \"Chapel of the Holy Cross\"\n },\n {\n position: { lat: 34.823736, lng: -111.8001857 },\n title: \"Red Rock Crossing\"\n },\n {\n position: { lat: 34.800326, lng: -111.7665047 },\n title: \"Bell Rock\"\n },\n ];\n // Create an info window to share between markers.\n const infoWindow = new InfoWindow();\n // Create the markers.\n tourStops.forEach(({ position, title }, i) =\u003e {\n const pin = new PinElement({\n glyph: `${i + 1}`,\n scale: 1.5,\n });\n const marker = new AdvancedMarkerElement({\n position,\n map,\n title: `${i + 1}. ${title}`,\n content: pin.element,\n gmpClickable: true,\n });\n // Add a click listener for each marker, and set up the info window.\n marker.addListener('click', ({ domEvent, latLng }) =\u003e {\n const { target } = domEvent;\n infoWindow.close();\n infoWindow.setContent(marker.title);\n infoWindow.open(marker.map, marker);\n });\n });\n}\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/advanced-markers-accessibility/docs/index.js#L8-L70\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\nhttps://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/advanced-markers-accessibility/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eAdvanced Marker Accessibility\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- prettier-ignore --\u003e\n \u003cscript\u003e(g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})\n ({key: \"AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8\", v: \"beta\"});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/advanced-markers-accessibility/docs/index.html#L8-L22\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/advanced-markers-accessibility/jsfiddle)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone https://github.com/googlemaps-samples/js-api-samples.git\n cd samples/advanced-markers-accessibility\n npm i\n npm start"]]
