Die Ein­bin­dung von Google Maps auf Websites oder in Apps sorgt für einen pro­fes­sio­nel­len Online-Auftritt und eine bessere Nut­zungs­er­fah­rung. Hierzu erfordert es Google Maps API-Keys, die sich über einen eigenen Google Account und die Ent­wick­ler-Seite von Google Maps erstellen und nutzen lassen.

Was ist ein Google Maps API-Key

Wenn Sie Google Maps-Funk­tio­nen wie eine Karte in Websites oder An­wen­dun­gen einbinden möchten, so benötigen Sie einen API-Zugriff. Der Zugriff erfolgt über die Pro­gram­mier­schnitt­stel­le, abgekürzt API, die den Austausch von Daten und die an­wen­dungs­über­grei­fen­de Nutzung von Google Maps er­mög­licht. Wer die API von Google Maps nutzen möchte, benötigt hierzu einen ein­ma­li­gen geheimen Google Maps API-Key.

Der Au­then­ti­fi­zie­rungs­schlüs­sel iden­ti­fi­ziert be­rech­tig­te API-Zugriffe und au­to­ri­siert den feh­ler­frei­en Austausch von Daten und Funk­tio­nen von Google Maps. Je nachdem, wie Sie Google Maps einbinden, überprüft Google mittels API-Key hinaus, ob die Anzahl der Zugriffe noch im kos­ten­lo­sen Bereich liegt.

Welche Vorteile bietet die Ein­bin­dung von Google Maps?

Die In­te­gra­ti­on von Google Maps un­ter­stützt ein pro­fes­sio­nel­les Auftreten und wertet Websites und Apps auf. Zudem bietet Google Maps viel­fäl­ti­ge APIs mit eigenen Vorteilen und ver­schie­de­nem Funk­ti­ons­um­fang. Mit in­te­grier­ter Google Karte lässt sich die Auf­find­bar­keit des eigenen Un­ter­neh­mens oder die Nut­zungs­er­fah­rung von Online-Diensten mit Kar­ten­funk­ti­on op­ti­mie­ren oder mit anderen teilen.

Möchten Sie Google Maps einbinden, so ist das zum Beispiel über WordPress für Google Maps mit oder ohne Plugin möglich. Der Mehrwert für die Nut­zungs­er­fah­rung von Kundinnen und Kunden lässt sich für Ihren Online-Auftritt in jedem Fall nicht be­strei­ten.

Übrigens: Möchten Sie Karten in Ihre Website einbetten, jedoch nicht Google Maps verwenden, so bieten sich hierzu Google Maps Al­ter­na­ti­ven wie Apple Maps, Waze oder Maps.me an.

IONOS Ent­wick­ler API
Verwalten Sie Ihre IONOS Hosting-Produkte über unsere leis­tungs­star­ken APIs
  • DNS-Ma­nage­ment
  • SSL-Ver­wal­tung
  • API-Do­ku­men­ta­ti­on

Google Maps API ak­ti­vie­ren

Bevor Sie einen API-Key ge­ne­rie­ren und einbinden, müssen Sie zunächst die ge­wünsch­ten APIs von Google Maps ak­ti­vie­ren. Für diese gilt der jeweilige Schlüssel und er­mög­licht den Austausch von Daten und Funk­tio­nen.

Schritt 1: Öffnen Sie zunächst die Google-Clouds-Plattform und melden Sie sich an. Hier finden Sie im Menü unter „APIs & Dienste“ den Punkt „Bi­blio­thek“.

Bild: Das Untermenü „Bibliothek“ im Menüpunkt „APIs & Services“
Das Untermenü „Bi­blio­thek“ der „APIs & Dienste“ mit allen ver­füg­ba­ren APIs in der Google-Cloud-Plattform.

Schritt 2: Gehen Sie in der Bi­blio­thek auf „Maps“. Sie sehen nun eine Übersicht der APIs für Google Maps. Bei diesen handelt es sich um folgende:

  • Geo­lo­ca­ti­on API: Zur Stand­ort­be­stim­mung von Be­su­che­rin­nen und Besuchern der Seite.
  • Maps Embed API: Zum Einbetten einer Standard-Maps-Karte als iFrame.
  • Maps Ja­va­Script API: Zum Einbinden der Karte als Ja­va­Script für mehr Kontrolle und In­ter­ak­ti­vi­tät.
  • Maps Static API: Zum Einbinden einer Karte als sta­ti­sches Bild.
  • Places API: Zum Finden und Abbilden von spe­zi­fi­schen Adressen auf der Karte.
Bild: Google Maps APIs
Alle ver­füg­ba­ren Google Maps APIs in der Übersicht.

Sollten nicht alle APIs oder die ge­wünsch­te API nicht in der Bi­blio­thek au­to­ma­tisch auf­tau­chen, so nutzen Sie die Such­funk­ti­on.

Schritt 3: Wählen Sie die be­tref­fen­de API aus und öffnen Sie die Detail-Ansicht. Klicken Sie hier auf den Button „Ak­ti­vie­ren“.

Bild: Google Maps API Aktivierung
Um eine aus­ge­wähl­te Google Maps API zu nutzen, erfordert es eine Ak­ti­vie­rung.

Vor­aus­set­zun­gen für einen Google Maps API-Key

Um einen API-Key erstellen zu können, benötigen Sie nicht nur einen eigenen Google-Account, sondern auch ein eigenes Rech­nungs­kon­to für die Google-Maps-Plattform. Selbst, wenn Sie Google Maps im kos­ten­lo­sen Nut­zungs­rah­men verwenden, ist ein Rech­nungs­kon­to Pflicht. Zudem müssen Sie min­des­tens einen API-Schlüssel mit einem Projekt oder einem Dienst ver­knüp­fen, in dem Sie Maps einbinden.

Google Maps API-Key erstellen

Schritt 1: Öffnen Sie nun die Konsole der Google-Clouds-Plattform und gehen Sie auf „Projekt auswählen“.

Schritt 2: Hier wählen Sie nun das be­tref­fen­de Projekt für den API-Key aus und erstellen ein neues Projekt. Gehen Sie oben links auf das Menü-Symbol und im Menü auf „APIs & Dienste“ und auf „An­mel­de­da­ten“.

Bild: Anmeldedaten unter „APIs & Services“
API-Keys lassen sich unter „An­mel­de­da­ten“ im Menüpunkt „APIs & Services“ erstellen

Schritt 3: Gehen Sie im Anmelde-Menü auf „An­mel­de­da­ten erstellen“ und auf „API-Schlüssel“. Sie sehen nun im Dialog „API-Schlüssel erstellt“ den er­stell­ten API-Key im Feld „Mein API-Schlüssel“. Sie sehen den er­stell­ten Schlüssel zudem im An­mel­de­da­ten-Menü unter allen vor­aus­ge­gan­ge­nen API-Keys auf­ge­lis­tet. Der API-Key dient später zum Einfügen in Ihren Code, in Plugin-Ein­stel­lun­gen oder in Ihrem CMS (Content Ma­nage­ment System).

Tipp

Möchten Sie erfahren, wie Sie auch für ChatGPT, Steam, Open­Wea­ther oder YouTube API-Keys erstellen? Dann beachten Sie auch unsere An­lei­tun­gen zu den Themen:

API-Key für Google Maps ein­schrän­ken

Bereits im Dialog „API-Schlüssel erstellt“ weist Google darauf hin, dass Sie den API-Key ein­schrän­ken sollten. Durch eine Ein­schrän­kung ver­hin­dern Sie, dass nicht au­to­ri­sier­te Dienste oder Personen den Schlüssel verwenden. Um den Schlüssel ein­zu­schrän­ken, gehen Sie direkt nach der Er­stel­lung auf den Punkt „Schlüssel ein­schrän­ken“. Um den Schlüssel später zu be­schrän­ken, gehen Sie in der Google-Cloud-Konsole auf „Projekt auswählen“ für das zu­ge­hö­ri­ge Projekt, im Menü oben links auf „APIs & Dienste“ und auf „An­mel­de­da­ten“. Wählen Sie hier den Schlüssel aus.

Mögliche Ein­schrän­kun­gen umfassen:

  • An­wen­dungs­ein­schrän­kun­gen
  • Website-Ein­schrän­kun­gen
  • API-Ein­schrän­kun­gen

API-Schlüssel für Google Maps nutzen

Um den Key zu verwenden, kopieren Sie ihn und fügen ihn in HTML-Code, in Plugin-Ein­stel­lun­gen oder im CMS an der ent­spre­chen­den Stelle ein. Um einen Code-Snippet zum Einbinden von Google Maps zu nutzen, müssen Sie den Abschnitt „YOUR_API_KEY“ mit dem ent­spre­chen­den API-Key ersetzen.

Zum Hauptmenü