Rendere gli indicatori trascinabili

Quando la funzionalità di trascinamento è attivata, gli utenti possono trascinare i marker 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 visualizza la sua posizione aggiornata al termine del trascinamento (viene attivato l'evento dragend):

Per trascinare un indicatore con la tastiera:

  1. Premi il tasto Tab finché non viene selezionato il marcatore.
  2. Utilizza il tasto Freccia per spostarti sul marcatore desiderato.
  3. Per attivare il trascinamento, premi Opzione + Barra spaziatrice o Opzione + Invio (Mac), Alt + Barra spaziatrice o Alt + Invio (Windows).
  4. Utilizza i tasti Freccia per spostare il marcatore.
  5. Per rilasciare l'indicatore nella nuova posizione, premi la barra spaziatrice o Invio. In questo modo verrà disattivato anche il trascinamento.
  6. Per disattivare il trascinamento e riportare il marcatore 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();
index.ts

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();
index.js

Impostare il testo descrittivo

Per impostare un testo descrittivo per un indicatore, che può essere letto dagli screen reader, utilizza l'attributo AdvancedMarkerElement.title, come mostrato di seguito:

    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 il mouse passa sopra il marcatore.