Quando un indicatore è cliccabile o trascinabile, può rispondere all'input del mouse e della tastiera. Puoi utilizzare il mouse o la tastiera per spostarti tra gli indicatori e per spostare un indicatore se è trascinabile. Il testo specificato nell'opzione title è leggibile dagli screen reader.
- Per rendere cliccabile un indicatore, imposta la proprietà
AdvancedMarkerElement.gmpClickablesutruee aggiungi un gestore di eventi di clic. - Per rendere trascinabile un indicatore, imposta la proprietà
AdvancedMarkerElement.gmpDraggablesutrue. - Per impostare il testo descrittivo per un indicatore, utilizza l'opzione
AdvancedMarkerElement.title.
Rendi cliccabile un indicatore
L'esempio seguente mostra una mappa con cinque indicatori cliccabili e attivabili:
Per spostarti tra gli indicatori utilizzando la tastiera:
- Utilizza il tasto Tab per concentrarti sul primo indicatore; se sulla stessa mappa sono presenti più indicatori, utilizza i tasti freccia per spostarti tra gli indicatori.
- Se l'indicatore è cliccabile, 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 informativa si chiude, lo stato attivo torna sull'indicatore associato.
- Premi di nuovo Tab per continuare a spostarti tra gli altri controlli della mappa.
Visualizza il codice
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}`,
});
const marker = new AdvancedMarkerElement({
position,
map,
title: `${i + 1}. ${title}`,
content: pin.element,
});
// 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}`,
});
const marker = new AdvancedMarkerElement({
position,
map,
title: `${i + 1}. ${title}`,
content: pin.element,
});
// 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();
Per rendere di nuovo non cliccabile un indicatore, rimuovi il listener di eventi di clic:
// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});
// Removing the listener.
google.maps.event.removeListener(clickListener);
Creare un indicatore trascinabile
Quando la trascinabilità è abilitata, gli utenti possono trascinare gli indicatori sulla mappa utilizzando il mouse o i tasti freccia. Per rendere trascinabile un indicatore, imposta la proprietà AdvancedMarkerElement.gmpDraggable su true.
La seguente mappa di esempio mostra un indicatore trascinabile che mostra la sua posizione aggiornata al termine del trascinamento (viene attivato l'evento dragend):
Per trascinare un indicatore con la tastiera:
- Premi il tasto Tab fino a evidenziare gli indicatori.
- Utilizza il tasto freccia per spostarti sull'indicatore desiderato.
- Per attivare il trascinamento, premi Opzione + Barra spaziatrice o Opzione + Invio (Mac), Alt + Barra spaziatrice o Alt + Invio (Windows).
- Utilizza i tasti freccia per spostare l'indicatore.
- Per inserire l'indicatore nella nuova posizione, premi la barra spaziatrice o Invio. In questo modo verrà disattivato anche il trascinamento.
- Per disattivare il trascinamento e riportare l'indicatore nella posizione precedente, premi Esc.
Visualizza il codice
TypeScript
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const map = new Map(document.getElementById('map') as HTMLElement, {
center: {lat: 37.39094933041195, lng: -122.02503913145092},
zoom: 14,
mapId: '4504f8b37365c3d0',
});
const infoWindow = new InfoWindow();
const draggableMarker = new AdvancedMarkerElement({
map,
position: {lat: 37.39094933041195, lng: -122.02503913145092},
gmpDraggable: true,
title: "This marker is draggable.",
});
draggableMarker.addListener('dragend', (event) => {
const position = draggableMarker.position as google.maps.LatLng;
infoWindow.close();
infoWindow.setContent(`Pin dropped at: ${position.lat()}, ${position.lng()}`);
infoWindow.open(draggableMarker.map, draggableMarker);
});
}
initMap();
JavaScript
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const map = new Map(document.getElementById("map"), {
center: { lat: 37.39094933041195, lng: -122.02503913145092 },
zoom: 14,
mapId: "4504f8b37365c3d0",
});
const infoWindow = new InfoWindow();
const draggableMarker = new AdvancedMarkerElement({
map,
position: { lat: 37.39094933041195, lng: -122.02503913145092 },
gmpDraggable: true,
title: "This marker is draggable.",
});
draggableMarker.addListener("dragend", (event) => {
const position = draggableMarker.position;
infoWindow.close();
infoWindow.setContent(
`Pin dropped at: ${position.lat()}, ${position.lng()}`,
);
infoWindow.open(draggableMarker.map, draggableMarker);
});
}
initMap();
Imposta testo descrittivo
Per impostare il testo descrittivo di un indicatore che possa essere letto dagli screen reader, utilizza
l'attributo AdvancedMarkerElement.title, come mostrato qui:
const markerView = new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
Quando l'attributo title è impostato, il testo è visibile agli screen reader e
viene visualizzato quando passi il mouse sopra l'indicatore.
Imposta scala indicatore
L'aumento delle dimensioni degli indicatori riduce la precisione richiesta per interagire con gli indicatori su tutti i dispositivi, in particolare i dispositivi touchscreen, e migliora l'accessibilità. Gli indicatori predefiniti soddisfano lo standard per le
dimensioni minime WCAG AA, ma per gli sviluppatori che mirano a
rispettare la dimensione target WCAG AAA
la dimensione dell'indicatore deve essere aumentata. Consulta la personalizzazione di base degli indicatori per scoprire come utilizzare PinElement e modificare la scala di un indicatore per aumentarne le dimensioni.
Ecco un esempio di creazione di un indicatore più grande utilizzando un elemento PinElement ingrandito:
const pinScaled = new PinElement({
scale: 2,
});
const markerScaled = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});