Migration: Maps-Modul in google.load

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Am 13. Oktober 2021 wird der Dienst, der das Maps-Modul für google.load bereitstellt, deaktiviert. Wenn Sie nach dem 13. Oktober 2021 versuchen, das Modul „Maps“ in google.load zu verwenden, erhalten Sie eine Fehlermeldung (das Modul „Maps“ wird nicht unterstützt) und es wird keine Karte geladen. Sie müssen zu einer der Alternativen wechseln, um mögliche Ausfälle zu vermeiden.

Was muss ich tun?

Entfernen Sie zuerst das <script>-Tag, mit dem der google.load-Load-Balancer geladen wird. Entfernen Sie dann die Aufrufe von google.load. Wenn Sie Google loader für andere Zwecke verwenden, können Sie das loader-Tag <script> beibehalten.

Implementieren Sie als Nächstes eine neue Methode zum Laden der Maps JavaScript API. Wählen Sie dazu eine der folgenden Optionen aus:

Aktuelles Beispiel mit dem Google loader

Im folgenden Beispiel sehen Sie, wie Google Maps derzeit zum Laden der Maps JavaScript API verwendet wird (es gibt zwei <script>-Blöcke):

Vorher

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Bei diesem Ansatz wird die Maps JavaScript API gleichzeitig mit der Seite geladen. Um Inline-Loading zu implementieren, ersetzen Sie zuerst das Tag <script>, das www.google.com/jsapi lädt ("before"), durch das Tag <script>, das im folgenden Beispiel gezeigt wird:

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

Entfernen Sie dann im JavaScript-Code den Funktionsaufruf google.load, da er nicht mehr benötigt wird. Das folgende Beispiel zeigt eine leere initMap()-Funktion, die aufgerufen wird, wenn die Maps-Bibliothek erfolgreich geladen wurde:

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Dokumentation ansehen

Dynamisches Laden aus einer anderen JavaScript-Datei

Mit dem dynamischen Laden können Sie steuern, wann die Maps JavaScript API geladen wird. Sie können beispielsweise warten, bis die Maps JavaScript API geladen ist, bis der Nutzer auf eine Schaltfläche klickt oder eine andere Aktion ausführt. Um das dynamische Laden zu implementieren, ersetzen Sie zuerst das <script>-Tag, das www.google.com/jsapi lädt ("before"), durch den Code, um das <script>-Tag programmatisch hinzuzufügen, wie im folgenden Beispiel gezeigt:

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

Hängen Sie dann die Callback-Funktion an das Fensterobjekt an:

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

Fügen Sie das Tag <script> schließlich in den Header der Seite ein:

document.head.appendChild(script);

Dokumentation ansehen