Migration: Modul „Maps“ in google.load

Am 13. Oktober 2021 wurde der Dienst, über den das Modul „Maps“ für google.load bereitgestellt wurde, deaktiviert. Wenn Sie versuchen, das Modul „Maps“ in google.load zu verwenden, wird daher seit dem 13. Oktober 2021 eine Fehlermeldung angezeigt, dass das Modul nicht unterstützt wird, und keine Karte geladen. Um mögliche Ausfälle zu vermeiden, müssen Sie auf eine der Alternativen ausweichen.

Was muss ich tun?

Entfernen Sie zuerst das <script>-Tag, mit dem das google.load-Ladeprogramm geladen wird. Entfernen Sie dann die Aufrufe an google.load. Wenn Sie das Ladeprogramm für andere Zwecke verwenden, können Sie das <script>-Tag beibehalten.

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

• API inline mit dem <script>-Tag laden
• API dynamisch aus einer anderen JavaScript-Datei laden

Aktuelles Beispiel mit dem „google.load“-Ladeprogramm

Im folgenden Beispiel wird das „google.load“-Ladeprogramm zum Laden der Maps JavaScript API verwendet (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>

API inline mit dem <script>-Tag laden (empfohlen)

Bei diesem Ansatz wird die Maps JavaScript API gleichzeitig mit der Seite geladen. Um das Inline-Laden zu implementieren, müssen Sie zuerst das <script>-Tag, über das www.google.com/jsapi geladen wird (siehe Vorher), durch das <script>-Tag aus dem folgenden Beispiel ersetzen:

<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 google.load-Funktionsaufruf. Er wird nicht mehr benötigt. Im folgenden Beispiel sehen Sie 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

API dynamisch aus einer anderen JavaScript-Datei laden

Beim dynamischen Laden lässt sich steuern, wann die Maps JavaScript API geladen wird. Die Maps JavaScript API kann z. B. erst dann geladen werden, wenn der Nutzer auf eine Schaltfläche klickt oder eine andere Aktion ausführt. Um das dynamische Laden zu implementieren, müssen Sie zuerst das <script>-Tag, über das www.google.com/jsapi geladen wird (siehe Vorher), wie im folgenden Beispiel durch Code ersetzen, um das <script>-Tag programmatisch hinzuzufügen:

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;

Danach hängen Sie die Callback-Funktion an das Fensterobjekt an:

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

Zum Schluss fügen Sie das <script>-Tag in den Kopf der Seite ein:

document.head.appendChild(script);

Dokumentation ansehen