Die Google-Karte auf der Kontaktseite ist leer oder grau — so beheben Sie es

Sie öffnen die Kontaktseite und statt der Karte sehen Sie ein graues Rechteck, eine Karte mit der Meldung „For development purposes only" oder schlicht gar nichts. Für einen Kunden, der sucht, wie er zu Ihnen findet, ist das, als hätten Sie die Adresse verlegt, ohne es jemandem zu sagen. Die gute Nachricht: Fast immer handelt es sich um ein kleines Konfigurationsproblem, nicht um einen dauerhaften Defekt.

In diesem Artikel erkläre ich allgemeinverständlich, welche Ursachen tatsächlich dahinterstecken (nicht alle haben mit einem „teuren API-Schlüssel" zu tun) und wie Sie sie Schritt für Schritt beheben. Das Wichtigste, das Sie mitnehmen sollten: Für eine einfache Karte mit der Firmenadresse brauchen Sie in den meisten Fällen gar keinen API-Schlüssel. Es gibt eine kostenlose Variante, die nicht mehr kaputtgeht.

Finden Sie zuerst heraus, WELCHE Art Karte Sie auf der Seite haben

Bevor Sie irgendetwas unternehmen, müssen Sie wissen, welchen Kartentyp Ihre Website verwendet, denn die Lösung unterscheidet sich. Es gibt zwei Varianten:

• Einfache Karte per iFrame (Embed) — der Code sieht aus wie `<iframe src="https://www.google.com/maps/embed?...">`. Das ist die kostenlose Variante, sie braucht keinen API-Schlüssel und wird für die meisten Unternehmen empfohlen.
• Karte über JavaScript (Maps JavaScript API) — im Code erscheint `maps.googleapis.com/maps/api/js?key=...`. Diese benötigt einen API-Schlüssel, ein aktives Google-Rechnungskonto und ist meist die Ursache der Fehlermeldungen.

Um zu sehen, welche Variante Sie haben, öffnen Sie die Kontaktseite, klicken Sie mit der rechten Maustaste auf den Kartenbereich und wählen Sie „Untersuchen". Suchen Sie nach den Begriffen `embed` oder `api/js`. Erscheinen rot markierte Fehler in der Konsole (Tab „Console"), notieren Sie diese — sie sagen Ihnen genau, wo das Problem liegt.

Typische Fehlermeldungen und was sie bedeuten

Wenn Sie die Variante mit API-Schlüssel verwenden, verrät Ihnen die Karte selbst, was sie stört. Die häufigsten:

• „For development purposes only" (Karte mit Wasserzeichen überdeckt) — die Abrechnung ist im Google-Cloud-Projekt nicht aktiviert, oder der Schlüssel hat kein verknüpftes Zahlungskonto.
• BillingNotEnabledMapError — dasselbe: Die Abrechnung muss aktiviert werden, auch wenn Sie innerhalb des monatlichen Freikontingents bleiben.
• RefererNotAllowedMapError — der Schlüssel ist auf eine andere Domain beschränkt. Sie haben die Domain gewechselt, sind von HTTP auf HTTPS umgestiegen oder haben eine neue Website gestartet, und die aktuelle Adresse steht nicht auf der freigegebenen Liste.
• ApiNotActivatedMapError — Sie haben den Dienst „Maps JavaScript API" in der Google-Cloud-Konsole nicht aktiviert.
• InvalidKeyMapError — der Schlüssel ist falsch, gelöscht oder fehlerhaft kopiert.

Die Meldung sehen Sie entweder direkt auf der Karte oder in der Browser-Konsole. Sie ist buchstäblich Ihre Karte zur Lösung.

Die einfache Lösung: Wechsel zum kostenlosen Embed ohne Schlüssel

Wenn Sie nur eine Karte mit der Firmenadresse benötigen, auf die der Kunde klickt, um die Navigation zu starten, brauchen Sie keinen API-Schlüssel. So gehen Sie vor:

1. Öffnen Sie Google Maps und suchen Sie die genaue Adresse Ihres Unternehmens (idealerweise Ihr Google-Business-Profil).

2. Klicken Sie auf Teilen (Share) → Tab Karte einbetten (Embed a map).

3. Wählen Sie die Größe und kopieren Sie den gesamten `<iframe ...>`-Code.

4. Fügen Sie ihn auf der Kontaktseite anstelle der alten Karte ein.

Fertig. Dieser Code hängt nicht von der Abrechnung ab, läuft nicht ab und liefert keine Fehlermeldungen mehr. Das ist die Lösung, die ich den meisten lokalen Unternehmen empfehle, weil sie „einmal einrichten, nie wieder daran denken" ist. Der API-Schlüssel bleibt nur dann sinnvoll, wenn Sie komplexe interaktive Karten benötigen (mehrere Pins, Stile, Routenberechnung auf der Website).

Wenn Sie den API-Schlüssel beibehalten möchten — die korrekte Reparatur

Manchmal ist die Website bereits mit der Maps JavaScript API gebaut, und Sie möchten sie nicht neu schreiben. Dann prüfen Sie der Reihe nach:

• Aktive Abrechnung: In der Google Cloud Console muss dem Projekt ein Zahlungskonto zugeordnet sein. Google bietet ein großzügiges monatliches Freikontingent für ein kleines Unternehmen, aber eine Karte muss im Konto hinterlegt sein.
• Aktivierter Dienst: Aktivieren Sie „Maps JavaScript API" (und „Maps Embed API", falls Sie Embed mit Schlüssel verwenden).
• Schlüsseleinschränkungen: Fügen Sie unter „Application restrictions" → „HTTP referrers" Ihre korrekte Domain hinzu — sowohl mit `www` als auch ohne, und auf HTTPS. Ein klassischer Fehler ist, nur `beispiel.de` einzutragen und `www.beispiel.de` zu vergessen.
• Mixed Content: Läuft die Website über HTTPS, wird die Karte aber über HTTP aufgerufen, blockiert der Browser sie. Alles muss `https://` sein.

Warten Sie nach jeder Schlüsseländerung ein paar Minuten — Google übernimmt Änderungen nicht sofort.

Weniger offensichtliche Ursachen: Cookie-Banner und Blocker

Manchmal ist die Karte korrekt konfiguriert, erscheint aber trotzdem nicht. Prüfen Sie auch dies:

• Zustimmungsbanner (Cookie) — viele DSGVO-Lösungen blockieren Google-Karten, bis der Besucher Marketing-Cookies akzeptiert. Das ist rechtlich korrekt, aber viele Besucher lehnen ab und sehen dann keine Karte. Die Lösung ist entweder ein „Platzhalter" mit Button „Karte anzeigen" oder die Rückkehr zum einfachen Embed als Basiselement.
• Blockier-Erweiterungen (Ad-Blocker) — manche blockieren Google-Skripte. Testen Sie die Karte in einem Inkognito-Fenster ohne Erweiterungen, um das auszuschließen.
• Cache — nach der Reparatur leeren Sie den Cache der Website und des Browsers, sonst sehen Sie weiterhin die alte, kaputte Version.

Wenn Sie all das versucht haben und es trotzdem nicht funktioniert, oder wenn Sie sich nicht mit der Google-Cloud-Konsole herumschlagen möchten, schreiben Sie uns per WhatsApp bei MPO Web Studio. Wir schauen uns das remote an, sagen Ihnen genau, woran es liegt, und beheben es oft direkt vor Ort — wir arbeiten remote in ganz Rumänien und zeigen Ihnen zunächst eine kostenlose Demo.