Übersicht

Mithilfe der Funktion „Erweiterte Markierungen“ können Sie leistungsstarke Markierungen erstellen und anpassen. Außerdem sind damit neue Funktionen für Markierungen verfügbar. Sie haben die Möglichkeit, Hintergrund, Rahmen und Glyphenfarbe der Standardmarkierung sowie die Größe der Markierung anzupassen und das Standardmarkierungssymbol durch eine benutzerdefinierte Grafik zu ersetzen. Sie können zugängliche Markierungen erstellen, die auf DOM-Klickereignisse und Tastatureingaben reagieren. Für noch mehr Anpassungsmöglichkeiten unterstützt die Funktion „Erweiterte Markierungen“ die Verwendung von benutzerdefiniertem HTML- und CSS-Code. Sie können sogar komplett benutzerdefinierte Markierungen erstellen. Bei 3D-Anwendungen lässt sich die Höhe festlegen, in der eine Markierung angezeigt wird. Erweiterte Markierungen werden sowohl auf Raster- als auch auf Vektorkarten unterstützt (Karten-ID erforderlich).

Erste Schritte mit erweiterten Markierungen

Farbe, Größe und Symbolbild anpassen

Sie können den Hintergrund, das Symbol und die Rahmenfarbe der Standardmarkierung und die Größe der Markierung anpassen.

Screenshot mit einigen benutzerdefinierten Markierungen

Ersetzen Sie das Standardmarkierungssymbol durch ein benutzerdefiniertes SVG- oder PNG-Bild.

Screenshot mit benutzerdefinierten SVG-Markierungen

Benutzerdefinierte HTML-Markierungen erstellen

Sie können benutzerdefinierten HTML- und CSS-Code verwenden, um optisch ansprechende interaktive Markierungen und Animationen zu erstellen.

Screenshot mit einer benutzerdefinierten HTML-Markierung

Markierungen auf Klick- und Tastaturereignisse reagieren lassen

Sie können einen click-Event-Listener hinzufügen, damit Markierungen auf Klicks und Tastaturereignisse reagieren.

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  markerView.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

Höhe und Konfliktverhalten von Markierungen festlegen

Sie können die Höhe einer Markierung festlegen, damit sie mit 3D-Kartenelementen korrekt angezeigt wird. Außerdem lässt sich angeben, wie sich eine Markierung bei Überschneidungen mit einer anderen Markierung oder einem Kartenlabel verhalten soll. Die Höhe von Markierungen kann nur für Vektorkarten festgelegt werden.

Screenshot mit einer Markierung mit angepasster Höhe

Nächster Schritt