Google Maps: «Google Maps wurde auf dieser Seite nicht richtig geladen»

Die Karte wird dunkel, zeigt «Nur für Entwicklungszwecke», und ein Kasten fragt «Sind Sie der Inhaber dieser Website?». Die Konsole des Browsers nennt den Grund. Jeder Code unten kommt mit seiner Lösung in der Google Cloud Console, danach folgt, was eine Karte ohne Google kostet.

Was Sie sehen

Die Maps JavaScript API zeigt eines von zwei Dingen, wenn sie das Laden verweigert:

Google Maps wurde auf dieser Seite nicht richtig geladen.
Sind Sie der Inhaber dieser Website?                      OK

Auf Englisch: «This page can't load Google Maps correctly. Do you own this website?». Nach einem Klick auf OK bleibt die Karte dunkel oder grau, mit «Nur für Entwicklungszwecke» (For development purposes only) darüber. Auf manchen Websites steht stattdessen im Kartenbereich:

Hoppla! Ein Fehler ist aufgetreten.
Google Maps wurde auf dieser Seite nicht richtig geladen. Technische Details finden Sie in der JavaScript-Konsole.

Keiner der beiden Texte sagt, warum. Öffnen Sie die Entwicklerwerkzeuge des Browsers (F12), Tab Konsole, und laden Sie neu. Suchen Sie nach einer Zeile wie:

Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error

Die Fehlercodes

Aus der Fehlerreferenz von Google, die häufigsten zuerst:

Änderungen an einem Schlüssel brauchen einige Minuten, bis sie gelten. Laden Sie mit leerem Cache neu, bevor Sie etwas anderes ändern.

Website-Einschränkungen, die funktionieren

Unter APIs & Dienste → Anmeldedaten → Ihr Schlüssel → Anwendungseinschränkungen → Websites braucht jede Adresse, auf der die Karte läuft, einen Eintrag. Für eine Domain genügen sicher zwei Einträge:

https://example.com/*
https://*.example.com/*

Ergänzen Sie auch Test-Hosts und die Adresse, auf der Sie entwickeln. Eine Seite, die aus einer Datei geöffnet wird (file:///), sendet keine Website; ein beschränkter Schlüssel kann dort also nicht funktionieren. Verwenden Sie einen lokalen Webserver.

Wenn die Konsole keinen Google-Fehler zeigt

• Eine Content Security Policy blockiert das Skript. Die Konsole sagt dann, dass das Laden von maps.googleapis.com gegen die Policy verstösst; erlauben Sie es in script-src, dazu die Quellen für Bilder und Verbindungen, die Google auflistet.
• Ein Werbeblocker oder Datenschutz-Add-on blockiert die Anfrage. Versuchen Sie es in einem privaten Fenster ohne Add-ons.
• Das Kartenelement hat keine Höhe; die Karte ist also da, aber 0 Pixel hoch: #map { height: 480px; }.
• Der callback in der Skript-URL nennt eine Funktion, die es beim Laden des Skripts noch nicht gibt.

Was die Karte kostet

Seit März 2025 gibt Google jeder SKU einen kostenlosen Monatsbetrag statt des früheren Guthabens von USD 200. Dynamic Maps (die Maps JavaScript API) ist eine Essentials-SKU mit 10'000 kostenlosen Kartenaufrufen im Monat; darüber kostet die erste Stufe USD 7 pro 1'000 Aufrufe (Preise aus der Preisliste von Google, Oktober 2026). Ein Kartenaufruf zählt, wenn eine Seite eine Karte erstellt, egal was die Besucherin oder der Besucher danach damit tut.

Kacheldienste zählen stattdessen Kacheln. Eine Kartenansicht lädt beim Öffnen etwa 15 bis 30 Kacheln, und mehr, wenn verschoben und gezoomt wird; mit 30 bis 50 Kacheln pro Ansicht sind 2 Millionen Kacheln 40'000 bis 66'000 Ansichten.

Eine Schätzung mit genannten Annahmen; die Kacheln pro Ansicht hängen von der Grösse der Karte ab und davon, wie sie genutzt wird. Ihr Dashboard zeigt nach einem Tag die echte Zahl.

Eine Karte ohne Google

Braucht die Seite eine Karte mit Markern und sonst nichts von Google, kommt MapLibre GL JS mit einem Kacheldienst ohne Rechnungskonto aus. Der Code ist kurz:

// Google Maps
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 47.37, lng: 8.54 },
  zoom: 14
});
new google.maps.Marker({ position: { lat: 47.37, lng: 8.54 }, map, title: "Zürich" });

// MapLibre GL JS
const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/styles/light.json",
  center: [8.54, 47.37], // zuerst die Länge
  zoom: 13               // eins weniger als bei Google Maps für denselben Massstab
});
new maplibregl.Marker().setLngLat([8.54, 47.37])
  .setPopup(new maplibregl.Popup().setText("Zürich")).addTo(map);

Drei Dinge ändern sich: Koordinaten sind [Länge, Breite], Zoomstufen sind für denselben Massstab um eins tiefer, und die Stil-URL ersetzt den Kartentyp. Was nicht mitkommt: Places, Street View, Directions und die Firmeneinträge von Google. Brauchen Sie diese, behalten Sie Google dafür. Für Suche und Routing auf offenen Daten gibt es Dienste wie Nominatim und OSRM.

Die Kartenkacheln von overpass.ch stammen aus OpenStreetMap-Daten, mit neun Stilen und Beschriftung in 41 Sprachen. Ein Schlüssel vom Typ «Nur Karten» funktioniert wie ein Google-Schlüssel mit Website-Einschränkungen: Beschränken Sie ihn auf Ihre Websites, und eine Kopie ist anderswo nutzlos.