Profis mit Erfahrung
Das haben Sie sicher schon auf etlichen Websites gesehen:
Google Maps kann auf dieser Seite nicht richtig geladen werden.
Das liegt daran, dass hier Google Maps eingebettet wurde ohne Angabe eines API keys. Denn seit einigen Jahren erlaubt Google nur mehr die Nutzung von Maps in kommerziellen Website, wenn dafür ein sogenannter API key (Schlüssel) vorliegt. Den Schlüssel kann man bei Google kostenlos erhalten, aber nur bis zu einem gewissen Nutzungslimit. Google stellt dafür ein kostenloses monatliches Kontingent (im Umfang von rund 200,- USD) bereit.
Sie benötigen dafür ein Google Cloud-Konto, müssen darin ein Projekt erstellen und die entsprechende API aktivieren (in diesem Fall die Maps JavaScript API), ein Rechnungskonto verknüpfen (keine Sorge, die ersten $200,- sind ein Guthaben) und den Schlüssel dann in der Google Cloud Console unter »Anmeldedaten« generieren.
Bei Überschreiten des monatlichen Guthabens fallen Kosten an, aber das wird bei den allermeisten der üblichen Business-Websites von Einzel- oder Kleinunternehmen nicht zum Tragen kommen.
Diese Anleitung führt Sie Schritt für Schritt durch den Prozess, um einen Google Maps API-Schlüssel zu erstellen.
Ein API-Schlüssel (Application Programming Interface) ist im Grunde ein digitaler „Türöffner“ oder Ausweis. Er teilt Google mit: „Diese Website darf die Kartenfunktionen nutzen.“
Wichtige Vorab-Information
Auch wenn die Nutzung für kleine bis mittlere Websites oft kostenlos bleibt (es gibt dafür das monatliche Gratis-Guthaben), verlangt Google zwingend die Hinterlegung eines Zahlungsmittels (Kreditkarte oder Bankkonto), um Missbrauch zu verhindern.
Die Anleitung
Schritt 1: Bei der Google Cloud Platform anmelden
Google verwaltet alle technischen Funktionen, die man buchen möchte, in der sogenannten „Cloud Console“.
- Gehen Sie auf die Seite: console.cloud.google.com.
- Melden Sie sich mit Ihrem ganz normalen Google-Konto (das ist der Google Zugang, den Sie für Ihre Geschäftszwecke, wie bei Google Ads, Google Analaytics, Google Tag Manager, Google Search Console, etc., nutzen) an. Falls Sie keines haben, müssen Sie ein kostenloses Konto erstellen. Richten Sie eine Gmail-Adresse ein, oder verwenden Sie eine bereits existierende Mail-Adresse für das Google Konto.
Schritt 2: Ein Projekt erstellen
Ein „Projekt“ ist wie ein digitaler Ordner, in dem alle Einstellungen für Ihre Website gesammelt werden.
- Klicken Sie oben links (neben dem Google Cloud Logo) auf das Dropdown-Menü (dort steht meist „Projekt auswählen“ oder ein Name).
- Klicken Sie im neuen Fenster oben rechts auf „Neues Projekt“.
- Geben Sie dem Kind einen Namen (z. B. „Meine Website Maps“ oder »[meine-domain] Website Maps«) und klicken Sie auf „Erstellen“.
Schritt 3: Das Rechnungskonto einrichten (Pflicht)
Ohne hinterlegte Zahlungsdaten wird die Karte auf Ihrer Website eine Fehlermeldung zeigen („Nur für Entwicklungszwecke“).
- Klicken Sie oben links auf das Menü-Symbol (die drei Querstriche, oft „Burger-Menü“ genannt).
- Wählen Sie den Punkt „Abrechnung“ (Billing).
- Google führt Sie nun durch einen Assistenten. Wählen Sie Ihr Land aus und geben Sie Ihre Rechnungsadresse sowie Ihre Zahlungsdaten (Kreditkarte oder Bankkonto) an.
Keine Sorge: Wie erwähnt, fallen bei normalen Besucherzahlen meist keine Kosten an, da das monatliche Gratis-Guthaben sehr großzügig ist.
Schritt 4: Die Maps JavaScript API aktivieren
Jetzt sagen wir dem System, dass dieses Projekt speziell die Landkarten-Funktion nutzen soll.
- Klicken Sie im Menü (links oben) auf „APIs und Dienste“ > „Bibliothek“.
- Suchen Sie im Suchfeld nach „Maps JavaScript API“.
- Klicken Sie auf das Ergebnis und dann auf den blauen Button „Aktivieren“.
Schritt 5: Den API-Schlüssel erstellen
Nun generieren wir den eigentlichen Code.
- Klicken Sie im Menü links auf „Anmeldedaten“.
- Klicken Sie oben auf „+ Anmeldedaten erstellen“ und wählen Sie „API-Schlüssel“.
- Ein Fenster erscheint mit einer langen Kette aus Buchstaben und Zahlen. Das ist Ihr API-Schlüssel! Kopieren Sie diesen und speichern Sie ihn sicher ab.
Schritt 6: Den Schlüssel schützen (sehr wichtig!)
Damit niemand anderes Ihren Schlüssel stiehlt und auf seine Kosten nutzt, müssen wir ihn einschränken.
- Klicken Sie in der Liste Ihrer API-Schlüssel auf den Namen des gerade erstellten Schlüssels.
- Suchen Sie den Bereich „Anwendungseinschränkungen“.
- Wählen Sie „HTTP-Verweise (Websites)“.
- Klicken Sie auf „Hinzufügen“ und geben Sie Ihre Website-Adresse in diesem Format ein:
*.ihre-website.com/*(Das Sternchen bedeutet, dass der Schlüssel auf allen Unterseiten Ihrer Domain funktioniert). - (Optional aber empfohlen): Unter „API-Einschränkungen“ wählen Sie „Schlüssel einschränken“ und haken in der Liste nur die „Maps JavaScript API“ an.
- Klicken Sie ganz unten auf „Speichern“.
Was mache ich jetzt mit dem Schlüssel?
Diesen Schlüssel (die lange Zeichenkette) senden Sie nun an Ihren Webdesigner oder tragen ihn in das entsprechende Feld Ihres Website-Baukastens oder Plugins (z. B. bei WordPress, Elementor, Avada, Divi, etc. ) ein.
Und dann?
Überprüfen Sie die Nutzung der Maps JavaScript API (und auch aller anderen APIs), und sehen Sie sich die aktuelle Nutzung in Ihrem Google Cloud Account an. Diese sieht man nach einem Klick auf das Hamburger-Icon am oberen linken Eck unter “APIs und Dienste” > “Aktivierte APIs und Dienste”. Ändern Sie dort den Zeitraum auf 30 Tage.
Die Alternative
Alternativ wechseln Sie zur Embed bzw. Embed Advanced API für unlimitierte Nutzung, wenn es nur um die simple Einbindung einer Landkarte ohne jegliche Erweiterung geht.