{"id":230,"date":"2022-09-13T14:45:07","date_gmt":"2022-09-13T12:45:07","guid":{"rendered":"https:\/\/hpdkb.ledl.net\/domaintechnik\/allgemein\/google-maps-einbinden\/"},"modified":"2025-11-12T16:08:30","modified_gmt":"2025-11-12T15:08:30","slug":"google-maps-einbinden","status":"publish","type":"post","link":"https:\/\/hpdkb.ledl.net\/domaintechnik\/content\/google-maps-einbinden\/","title":{"rendered":"Google\u00ae Maps einbinden"},"content":{"rendered":"\n

1. Maps Modul auf die Webseite ziehen<\/h2>\n\n\n\n

Ziehen Sie mit der Maus das Modul auf die gew\u00fcnschte Position der Webseite und w\u00e4hlen Sie dann die gew\u00fcnschte Karte.<\/p>\n\n\n\n

2. Google Maps einrichten<\/h2>\n\n\n\n

Tipp:<\/strong>
Wenn Sie keinen Google API-Schl\u00fcssel verwenden m\u00f6chten, k\u00f6nnen Sie stattdessen einfach einen Link zu Google Maps einf\u00fcgen. So l\u00e4sst sich beispielsweise \u00fcber einen Button oder Textlink wie \u201eRoute berechnen\u201c<\/strong> der gew\u00fcnschte Standort direkt in Google Maps \u00f6ffnen \u2013 ganz ohne Einbindung der Google Maps API.<\/p>\n\n\n\n

Damit Google\u00ae<\/sup> Maps funktioniert, ben\u00f6tigen Sie einen sogenannten API Schl\u00fcssel<\/strong>. Diesen Schl\u00fcssel tragen Sie im rechten Seitenmen\u00fc im gleichnamigen Feld „API Schl\u00fcssel<\/strong>“ ein.
Wie Sie einen API Schl\u00fcssel erstellen k\u00f6nnen erfahren Sie im n\u00e4chsten Schritt: „3. API Schl\u00fcssel erstellen<\/strong>„<\/p>\n\n\n\n

Bei „Adresse<\/strong>“ tragen Sie die Adresse des Standorts der angezeigt werden soll, ein. Bei „Zoom Level<\/strong>“ k\u00f6nnen Sie noch die Ansicht der Karte \u00e4ndern.<\/p>\n\n\n\n

\"\"
API-Schl\u00fcssel eintragen<\/figcaption><\/figure>\n\n\n\n

3. API Schl\u00fcssel erstellen<\/h2>\n\n\n\n

3.1 API aktivieren<\/h3>\n\n\n\n

F\u00fcr die Nutzung von Google\u00ae<\/sup> Maps und die Erstellung eines API Schl\u00fcssels, wird in erster Linie ein Google\u00ae<\/sup> Konto<\/strong> ben\u00f6tigt. Sollten Sie noch kein Google\u00ae<\/sup> Konto besitzen, k\u00f6nnen Sie \u00fcber den folgenden Link ein neues Konto erstellen<\/strong><\/a>.<\/p>\n\n\n\n

Rufen Sie die Seite https:\/\/console.developers.google.com\/?hl=de<\/strong><\/a> auf, damit Sie sich in die Google\u00ae<\/sup> Entwickler Konsole<\/strong> mit Ihrem Google Konto einloggen k\u00f6nnen.<\/p>\n\n\n\n

W\u00e4hlen Sie dann den Punkt „+APIs und Dienste aktivieren<\/strong>„.<\/p>\n\n\n\n

\"\"
+ APIs und Dienste aktivieren<\/figcaption><\/figure>\n\n\n\n

Tippen Sie im Suchfeld das Wort „Maps<\/strong>“ ein, damit nur die relevanten APIs angezeigt werden.
W\u00e4hlen Sie die gew\u00fcnschte API Anwendung aus welche Sie aktivieren m\u00f6chten (z.B.: Maps Embed API).<\/p>\n\n\n\n

\"\"
API aktivieren<\/figcaption><\/figure>\n\n\n\n

3.2 Schl\u00fcssel erstellen<\/h3>\n\n\n\n

Die API wurde nun erfolgreich aktiviert und Sie k\u00f6nnen nun \u00fcber den Reiter „Anmeldedaten<\/strong>“ den ben\u00f6tigten API Schl\u00fcssel generieren lassen.<\/p>\n\n\n\n

Rufen Sie f\u00fcr die Erstellung des Schl\u00fcssels den Link „‚Zugangsdaten‘ unter ‚APIs und Dienste‘<\/strong>“ auf.<\/p>\n\n\n\n

Als n\u00e4chstes w\u00e4hlen Sie im Reiter „Anmeldedaten“ die Schaltfl\u00e4che „Anmeldedaten erstellen<\/strong>“ und w\u00e4hlen dann den Punkt „API-Schl\u00fcssel<\/strong>„.<\/p>\n\n\n\n

\"\"
API-Schl\u00fcssel erstellen<\/figcaption><\/figure>\n\n\n\n

Sie k\u00f6nnen den Zugriff auf den Schl\u00fcssel mit der gleichnamigen Schaltfl\u00e4che einschr\u00e4nken<\/strong>.
Kopieren<\/strong> Sie nun den erstellten API-Schl\u00fcssel und f\u00fcgen Sie diesen im entsprechenden Feld im Homepage Baukasten ein (siehe Schritt 3 dieser Anleitung).<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

1. Maps Modul auf die Webseite ziehen Ziehen Sie mit der Maus das Modul auf die gew\u00fcnschte Position der Webseite und w\u00e4hlen Sie dann die gew\u00fcnschte Karte. 2. Google Maps einrichten Tipp:Wenn Sie keinen Google API-Schl\u00fcssel verwenden m\u00f6chten, k\u00f6nnen Sie stattdessen einfach einen Link zu Google Maps einf\u00fcgen. So l\u00e4sst sich beispielsweise \u00fcber einen Button […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,103],"tags":[49,52,51,50],"class_list":["post-230","post","type-post","status-publish","format-standard","hentry","category-content","category-module","tag-api-schluessel","tag-google-maps","tag-karte","tag-maps"],"_links":{"self":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":13,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"predecessor-version":[{"id":1031,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts\/230\/revisions\/1031"}],"wp:attachment":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}