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
auftrue
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;
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;
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; }
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>
Testbeispiel
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.
Code
TypeScript
function initMap() { const map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: {lat: 37.39094933041195, lng: -122.02503913145092}, zoom: 14, mapId: '4504f8b37365c3d0', }); const infoWindow = new google.maps.InfoWindow(); const draggableMarker = new google.maps.marker.AdvancedMarkerView({ map, position: {lat: 37.39094933041195, lng: -122.02503913145092}, draggable: 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); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.39094933041195, lng: -122.02503913145092 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const infoWindow = new google.maps.InfoWindow(); const draggableMarker = new google.maps.marker.AdvancedMarkerView({ map, position: { lat: 37.39094933041195, lng: -122.02503913145092 }, draggable: 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); }); } window.initMap = initMap;
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; }
HTML
<html> <head> <title>Draggable Advanced Marker</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>
Testbeispiel
Beschreibenden Text festlegen
Wenn Sie beschreibenden Text für eine Markierung festlegen möchten, der von Screenreadern gelesen werden kann, verwenden Sie das Attribut AdvancedMarkerView.title
wie hier gezeigt:
const markerView = new google.maps.marker.AdvancedMarkerView({
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.