Puoi rendere i marker più accessibili attivando la gestione degli eventi di clic, aggiungendo testo descrittivo per gli screen reader e regolando la scala dei marker.
- Quando un indicatore è selezionabile (o trascinabile), può rispondere all'input da tastiera e mouse.
- Il testo specificato nell'opzione
title
è leggibile dagli screen reader e viene visualizzato quando un utente passa il puntatore del mouse sopra il segnaposto. - L'aumento delle dimensioni dei marcatori riduce la precisione necessaria per interagire con questi elementi su tutti i dispositivi, in particolare quelli touchscreen, e migliora l'accessibilità. I marcatori predefiniti soddisfano lo standard WCAG AA per le dimensioni minime, ma per gli sviluppatori che mirano a rispettare lo standard WCAG AAA per le dimensioni target, le dimensioni del marcatore devono essere aumentate.
Consulta la sezione Personalizzazione di base degli indicatori per scoprire come modificare la scala degli indicatori, aggiungere il testo del titolo e altro ancora.
L'esempio seguente mostra una mappa con cinque indicatori cliccabili e selezionabili che includono il testo del titolo e sono stati impostati su una scala di 1,5x:
Per navigare tra i marcatori utilizzando la tastiera:
- Utilizza il tasto Tab per selezionare il primo marcatore. Se sono presenti più marcatori sulla stessa mappa, utilizza i tasti Freccia per scorrere i marcatori.
- Se il marcatore è selezionabile, premi il tasto Invio per "fare clic". Se un indicatore ha una finestra informativa, puoi aprirla facendo clic o premendo il tasto Invio o la barra spaziatrice. Quando la finestra delle informazioni si chiude, lo stato attivo torna al marker associato.
- Premi di nuovo il tasto Tab per continuare a spostarti tra gli altri controlli della mappa.
Rendere cliccabile un indicatore
Questa sezione mostra come fare in modo che i marcatori rispondano agli eventi di clic. Per rendere cliccabile un indicatore:
- Imposta la proprietà
gmpClickable
sutrue
.
TypeScript
const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, gmpClickable: true, });
JavaScript
const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, gmpClickable: true, });
- Aggiungi un listener di eventi di clic per rispondere all'input dell'utente.
TypeScript
// 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); });
JavaScript
// 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); });
Per rendere di nuovo non cliccabile un indicatore, chiama
removeListener
per rimuovere il listener di eventi di clic:// Remove the listener. google.maps.event.removeListener(clickListener);
Per migliorare ulteriormente l'accessibilità:
- Imposta un testo descrittivo per un indicatore utilizzando l'opzione
AdvancedMarkerElement.title
. - Aumenta la scala dei marcatori utilizzando la proprietà
scale
diPinElement
.
Codice di esempio completo
Visualizza il codice sorgente dell'esempio completo
TypeScript
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; const map = new Map(document.getElementById("map") as HTMLElement, { 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. 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({ glyph: `${i + 1}`, scale: 1.5, }); const marker = new AdvancedMarkerElement({ 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();
JavaScript
async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); const map = new Map(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. 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({ glyph: `${i + 1}`, scale: 1.5, }); const marker = new AdvancedMarkerElement({ 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();
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> </head> <body> <div id="map"></div> <!-- 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: "beta"});</script> </body> </html>