Markierungen anklickbar und zugänglich machen

Wenn eine Markierung anklickbar oder ziehbar ist, kann sie auf Tastatur- und Mauseingaben reagieren. Sie können Maus oder Tastatur verwenden, um zwischen Markierungen zu wechseln und ziehbare Markierungen zu verschieben. Text, der in der Option title angegeben wird, ist für Screenreader sichtbar.

Wenn Sie eine Markierung anklickbar machen möchten, müssen Sie einen Handler für Klickereignisse hinzufügen.
Um eine Markierung ziehbar zu machen, muss die Property AdvancedMarkerView.draggable auf true gesetzt werden.
Um beschreibenden Text für eine Markierung festzulegen, verwenden Sie die Option AdvancedMarkerView.title.

Markierungen anklickbar machen

Das folgende Beispiel zeigt eine Karte mit fünf anklickbaren, fokussierbaren Markierungen:

So verwenden Sie die Tastatur, um zwischen Markierungen zu wechseln:

Mit der Tabulatortaste können Sie den Fokus auf die erste Markierung legen. Falls sich auf der Karte mehrere Markierungen befinden, können Sie mit den Pfeiltasten zwischen den Markierungen wechseln.
Wenn die Markierung anklickbar ist, drücken Sie die Eingabetaste, um sie anzuklicken. Hat eine Markierung ein Infofenster, können Sie zum Öffnen des Fensters darauf klicken oder die Eingabe- oder Leertaste drücken. Nach dem Schließen des Infofensters ist wieder die zugehörige Markierung im Fokus.
Drücken Sie weiter auf die Tabulatortaste, um nacheinander die restlichen Kartensteuerelemente zu fokussieren.

Code

TypeScript

function initMap() {
    const map = new google.maps.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 google.maps.InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pinView = new google.maps.marker.PinView({
            glyph: `${i + 1}`,
        });

        const marker = new google.maps.marker.AdvancedMarkerView({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pinView.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);
        });
    });
}

declare global {
    interface Window {
        initMap: () => void;
    }
}

window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.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 google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pinView = new google.maps.marker.PinView({
      glyph: `${i + 1}`,
    });
    const marker = new google.maps.marker.AdvancedMarkerView({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pinView.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);
    });
  });
}

window.initMap = initMap;index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

[class$=api-load-alpha-banner] {
  display: none;
}
style.css

HTML

<html>
  <head>
    <title>Advanced Marker Accessibility</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>index.html

Testbeispiel

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Wenn eine Markierung nicht mehr anklickbar sein soll, entfernen Sie den Listener für Klickereignisse:

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

Markierungen 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 Property AdvancedMarkerView.draggable 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:

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