Google-Maps-API-Key

Schritt 1 — Die Google Cloud Console öffnen

Öffnen Sie die Google Cloud Console und melden Sie sich mit einem Google-Konto an (ein normales Gmail-Konto genügt).

Google Cloud Console öffnen

💡 Tipp: verwenden Sie ein dediziertes Geschäftskonto statt Ihres persönlichen, um alles ordentlich zu halten.

Schritt 2 — Ein Projekt erstellen

Ein "Projekt" ist der Container, in dem Ihr Key und Ihre Einstellungen leben.

1. Klicken Sie oben, neben dem "Google Cloud"-Logo, auf das Projekt-Dropdown.
2. Klicken Sie auf Neues Projekt.
3. Geben Sie ihm einen erkennbaren Namen, z. B. RoyLead Maps, und klicken Sie auf Erstellen.
4. Stellen Sie sicher, dass oben das gerade erstellte Projekt ausgewählt ist.

Schritt 3 — Abrechnung aktivieren

Google verlangt eine verknüpfte Karte auch für die Nutzung der kostenlosen Stufe. Ohne aktive Abrechnung sehen Sie einen Fehler oder das Wasserzeichen "For development purposes only".

1. Gehen Sie im linken Menü (☰) zu Abrechnung.
2. Klicken Sie auf Zahlungskonto verknüpfen.
3. Geben Sie Ihre Daten und eine Karte ein, dann bestätigen Sie.

🔒 Das Hinzufügen der Karte bedeutet nicht, dass Sie bezahlen müssen. Google berechnet nur, wenn Sie das monatliche kostenlose Kontingent überschreiten — für eine Landing Page sehr unwahrscheinlich. Weiter unten zeige ich Ihnen, wie Sie eine Budgetwarnung einrichten.

Schritt 4 — Die benötigten APIs aktivieren

Sie müssen die Google-Dienste einschalten, die die Adress-Autovervollständigung nutzt.

1. Gehen Sie im Menü (☰) zu APIs & Dienste → Bibliothek.
2. Suchen und aktivieren Sie nacheinander diese drei APIs (für jede: öffnen und auf Aktivieren klicken):

• Maps JavaScript API — die Karte und das Vorschlagsfeld.
• Places API — die eigentlichen Adressvorschläge.
• Geocoding API — ruft die Postleitzahl ab, wenn Google keine liefert (siehe Kasten unten).

ℹ️ Das Aktivieren einer API kostet nichts: Sie zahlen nur für die tatsächliche Nutzung. Aktivieren Sie alle drei, um Fehler wie "This API is not enabled" zu vermeiden.

📮 Warum die Geocoding API nötig ist. Google hängt die Postleitzahl an die Hausnummer: wer nur den Straßenvorschlag wählt, bekommt keine — und das Formular lässt sich nicht absenden, wenn die Postleitzahl Pflicht ist. Fehlt sie, holen wir sie aus den Koordinaten der gewählten Adresse — ein zusätzlicher Aufruf, nur in diesem Fall. Ohne diese API geht nichts kaputt: der Kunde tippt sie von Hand ein.

ℹ️ Places API (New) wird nicht benötigt: unser Formular nutzt die klassische Autovervollständigung. Wenn Sie sie bereits aktiviert haben, macht es keinen Unterschied, ob Sie sie an- oder ausgeschaltet lassen.

Schritt 5 — Den API-Key erstellen

1. Gehen Sie im Menü (☰) zu APIs & Dienste → Anmeldedaten.
2. Klicken Sie auf + Anmeldedaten erstellen → API-Schlüssel.
3. Google generiert den Key: eine lange Zeichenfolge wie AIzaSyB3xK...d9F2qZ.
4. Kopieren Sie ihn (Sie fügen ihn in Schritt 7 in RoyLead ein). Noch nicht schließen: zuerst schränken wir ihn ein.

⚠️ Teilen Sie diesen Key niemals in öffentlichen Chats, Screenshots oder Repositories. Behandeln Sie ihn auch nach dem Einschränken wie ein Passwort.

Schritt 6 — Den Key einschränken (wichtig für die Sicherheit)

Der Key landet im Code der Landing Page und ist damit für jeden sichtbar, der den Quellcode ansieht. Damit ihn niemand kopieren und auf Ihre Kosten verwenden kann, müssen Sie ihn einschränken. Öffnen Sie den Key von der Seite Anmeldedaten (Stift-Symbol) und legen Sie zwei Einschränkungen fest.

6a — HTTP-Referrer (welche Websites ihn nutzen dürfen)

1. Wählen Sie unter Anwendungseinschränkungen die Option HTTP-Referrer (Websites).
2. Fügen Sie die URLs der Domain hinzu, auf der Sie den Key verwenden werden (beide Zeilen):

https://ihredomain.com/*
https://*.ihredomain.com/*

Ersetzen Sie ihredomain.com durch Ihre Domain. Mehrere Domains? Besser einen separaten Key pro Domain erstellen (in RoyLead ist der Key pro Domain).

6b — API-Einschränkungen

1. Wählen Sie unter API-Einschränkungen die Option Schlüssel einschränken.
2. Kreuzen Sie nur an: Maps JavaScript API, Places API, Geocoding API.
3. Speichern.

⚠️ Einschränkungen können bis zu 5 Minuten dauern, bis sie wirksam werden. Sehen Sie direkt danach einen Fehler, warten Sie ein paar Minuten und versuchen Sie es erneut.

Schritt 7 — Den Key in RoyLead einfügen

1. Öffnen Sie die Domain-Einstellungen in RoyLead.
2. Wählen Sie die Domain, auf der Sie die Autovervollständigung aktivieren möchten.
3. Fügen Sie den Key in das Feld Google Maps API Key ein und speichern Sie.

Zu Domains gehen ↗

Schritt 8 — Prüfen, ob es funktioniert

1. Öffnen Sie eine auf dieser Domain veröffentlichte Landing Page.
2. Beginnen Sie im Formular, eine Adresse einzugeben (z. B. "Romstraße…").
3. Google-Vorschläge sollten erscheinen: wählen Sie einen aus, und das Feld füllt sich. ✅

Erscheinen keine Vorschläge, siehe den Abschnitt "Fehlerbehebung".

Was es kostet

Google bietet ein monatliches kostenloses Nutzungskontingent für Maps/Places-APIs. Bei typischen Landing-Page-Volumina bleiben Sie fast immer im kostenlosen Bereich und zahlen 0 €. Die Karte dient nur als Sicherheit und deckt eventuelle Überschreitungen ab.

Zur Sicherheit richten Sie eine Budgetwarnung ein:

1. Menü (☰) → Abrechnung → Budgets und Warnungen.
2. Budget erstellen, niedriger Schwellenwert (z. B. 5 €), E-Mail-Warnung.

💳 Places Autocomplete stellt bei jedem Tastendruck eine Anfrage: 1 Lead = eine Handvoll Anfragen, nicht nur eine. Trotzdem bräuchte es mehrere tausend ausgefüllte Formulare pro Monat, um tatsächlich zu zahlen.

Fehlerbehebung

💡 Zum Debuggen: öffnen Sie die Landing Page, drücken Sie F12 → Tab Console. Google-Maps-Fehler erscheinen dort mit dem genauen Namen: suchen Sie ihn in der obigen Tabelle.

Best Practices

• 🔑 Ein Key pro Domain (in RoyLead ist der Key pro Domain): wenn einer durchsickert, blockieren Sie nur diesen.
• 🔒 Den Key immer einschränken (Schritt 6): ein uneingeschränkter Key ist einer, den jemand auf Ihre Kosten verwenden wird.
• 🚨 Halten Sie die Budgetwarnung aktiv.