Rendi 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 trascinabile 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 vengono attivati.
  2. Utilizza il tasto freccia per spostarti all'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 la barra spaziatrice o Invio. In questo modo verrà disattivato anche il trascinamento.
  6. Per disattivare il trascinamento e riportare l'indicatore alla 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

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 il mouse passa il mouse sopra l'indicatore.