Rendere gli indicatori trascinabili

Quando la funzionalità di trascinamento è attivata, gli utenti possono trascinare gli indicatori sulla mappa utilizzando il mouse o i tasti freccia. Per rendere un indicatore trascinabile, imposta la proprietà AdvancedMarkerElement.gmpDraggable su true.

La mappa di esempio seguente mostra un indicatore spostabile che mostra 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é gli indicatori non sono attivi.
  2. Usa il tasto Freccia per spostarti sull'indicatore 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 l'indicatore.
  5. Per inserire l'indicatore nella nuova posizione, premi Barra spaziatrice o Invio. Verrà disattivato anche il trascinamento.
  6. 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();
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 un testo descrittivo

Per impostare un testo descrittivo per un indicatore, che possa 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 l'indicatore.