Auf erweiterte Markierungen umstellen

Am 21. Februar 2024 (v3.56) wurde „google.maps.Marker“ eingestellt. Wir empfehlen Ihnen, auf die neue google.maps.marker.AdvancedMarkerElement-Klasse umzustellen. Erweiterte Markierungen bieten wesentliche Verbesserungen gegenüber der alten google.maps.Marker-Klasse. Weitere Informationen zu dieser Einstellung

Gehen Sie so vor, um eine alte Markierung in eine erweiterte Markierung umzuwandeln:

  1. Fügen Sie Code zum Importieren der Markierungsbibliothek hinzu (siehe Schritte unten).
  2. Ändern Sie google.maps.Marker in google.maps.marker.AdvancedMarkerElement. Wenn in Ihrer Importanweisung AdvancedMarker deklariert wird, können Sie den qualifizierten Pfad weglassen.
  3. Fügen Sie eine Karten-ID in den Initialisierungscode der Karte ein, Sie können beispielsweise mapId: 'DEMO_MAP_ID' zu Testzwecken verwenden, falls Sie noch keine Karten-ID haben.

Bibliothek für erweiterte Markierungen hinzufügen

Welche Methode Sie zum Laden von Bibliotheken verwenden, hängt davon ab, wie die Maps JavaScript API auf Ihrer Webseite geladen wird.

  • Wenn auf Ihrer Webseite Dynamic Library Import verwendet wird, fügen Sie die Markierungsbibliothek hinzu und importieren Sie AdvancedMarkerElement (und verwenden Sie optional PinElement) zur Laufzeit, wie hier gezeigt.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Wird für Ihre Webseite das Legacy-Tag zum direkten Laden von Scripts verwendet, fügen Sie libraries=marker in das Ladescript ein, wie im folgenden Snippet gezeigt.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Weitere Informationen zum Laden der Maps JavaScript API

Beispiele

Nachfolgend sehen Sie Codebeispiele zum Hinzufügen einer alten Markierung, gefolgt vom Code für die entsprechenden erweiterten Markierungen:

Vor der Migration

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Nach der Migration

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new Map(document.getElementById("map"),  {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});

// The advanced marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

Funktionen für erweiterte Markierungen

Erweiterte Markierungen lassen sich auf eine Weise anpassen, die früher nicht möglich war. Sie können nun die Größe (Skalierung) der Markierungen anpassen und die Farbe von Hintergrund, Rahmen und Glyphe ändern. Das Arbeiten mit benutzerdefinierten Grafiken ist einfacher und es ist jetzt möglich, benutzerdefinierte Markierungen mit HTML und CSS zu erstellen. Weitere Informationen zu den Einsatzmöglichkeiten erweiterter Markierungen: