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. Für die Vorgängerversion von Markierungen (google.maps.Marker) gilt diese Anforderung nicht.
  2. Ändern Sie google.maps.Marker zu google.maps.marker.AdvancedMarkerElement.
  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.

  • Werden Scripts für Ihre Webseite dynamisch geladen, 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

  // 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,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

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

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: