Markierung ziehbar machen

Nutzer können ziehbare Markierungen auf der Karte mit der Maus oder den Pfeiltasten verschieben. Um eine Markierung ziehbar zu machen, muss die Eigenschaft AdvancedMarkerElement.gmpDraggable auf true gesetzt werden.

Die folgende Beispielkarte zeigt eine ziehbare Markierung, die ihre neue Position angibt, nachdem das Ziehen beendet wurde (das Ereignis dragend wird ausgelöst):

So ziehen Sie eine Markierung mithilfe der Tastatur:

  1. Drücken Sie die Tabulatortaste, bis die Markierungen im Fokus sind.
  2. Verwenden Sie die Pfeiltaste, um zur gewünschten Markierung zu wechseln.
  3. Um die Markierung ziehbar zu machen, drücken Sie Option + Leertaste oder Option + Eingabetaste (Mac) bzw. Alt + Leertaste oder Alt + Eingabetaste (Windows).
  4. Verwenden Sie die Pfeiltasten, um die Markierung zu verschieben.
  5. Um die Markierung an der neuen Position zu setzen, drücken Sie die Leertaste oder die Eingabetaste. Dadurch wird auch das Ziehen deaktiviert.
  6. Wenn das Ziehen deaktiviert und die Markierung wieder an ihrer vorherigen Position gesetzt werden soll, drücken Sie die Esc-Taste.

Code

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

Beschreibenden Text festlegen

Wenn Sie beschreibenden Text für eine Markierung festlegen möchten, der von Screenreadern gelesen werden kann, verwenden Sie das Attribut AdvancedMarkerElement.title wie hier gezeigt:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

Wenn das Attribut title festgelegt ist, ist der Text für Screenreader sichtbar. Er wird eingeblendet, wenn der Mauszeiger auf die Markierung bewegt wird.