Google Maps auf WordPress Website einbinden – mit PlugIn + API oder ohne PlugIn

WordPress MockUp + Google Maps Icon
Zuletzt aktualisiert: 21. Januar 2021

Nutzerbewertungen

Du möchtest eine Google Map bzw. Karte auf deiner WordPress Website einbinden?

Nichts leichter als das!

Hierzu gibt es 2 einfache Möglichkeiten zwischen denen du dich entscheiden kannst!

  1. Per PlugIn und API Schlüssel einbinden
  2. Karte per Embed Code als iFrame einbetten

Inhaltsverzeichnis

Google Maps per PlugIn und API Schlüssel einbinden

Mithilfe eines PlugIns hat man deutlich mehr Gestaltungsmöglichkeiten

Einen API Schlüssel kann man sich kostenlos bei Google generieren lassen. Erst ab 25.000 Kartenaufrufe pro Tag werden Kosten fällig.

WordPress Demo - Google Maps per SiteOrigin PlugIn und API Schlüssel

So gehst du vor:

1. Gehe zur Google Maps Plattform und klicke auf „Jetzt starten“.

Google Cloud - Google Maps Plattform

2. Wähle aus welche Funktionen du benötigst und klicke auf „Weiter“.

Google Maps Platform aktivieren

3. Klicke auf „Next“.

Google Maps - Enable API

4. Erstelle ein Projekt bzw. wähle ein bestehendes aus.

Google Maps Plattform - Projekt auswählen

5. Anschließend wird der API Schlüssel generiert, welchen du kopieren kannst.

API Key kopieren

6. Den kopierten API Code kannst du nun z.B. im „Google Maps“ Widget, welches im SiteOrigin Widget Bundle enthalten ist, einfügen.

7. Fertig!

Mit dem Google Maps Widget im SiteOrigin Widget Bundle kannst du noch einige Gestaltungsanpassungen machen, um die Karte und deine Website optisch aufzuwerten!

In meinem Google Maps Video Tutorial auf YouTube zeige ich dir wie das geht!

Video Anleitung: Google Maps per API in WordPress Webseite einbinden

In diesem Video Tutorial zeige ich dir Schritt für Schritt, wie du mithilfe eines API Schlüssels eine „responsive“ Karte mit dem Google Maps Widget von SiteOrigin hinzufügst. Die Funktionsweise der Einbindung ist bei anderen PlugIns sehr ähnlich und kann einfach übertragen werden.

Direkt zur richtigen Stelle im Video springen:

Benötigte PlugIns (00:15)

Google Maps einbinden (00:44)

API Key/ API Schlüssel anfordern (02:04)

Standort eingeben (03:36)

Steuerelemente und Zoom ausschalten (04:04)

Design anpassen (04:42)

Responsive Design (06:53)

Verwendete PlugIns:

Page Builder by SiteOrigin (kostenlos)
SiteOrigin Widgets Bundle (kostenlos)

Natürlich gibt es auch andere Plug-ins, mit welchen sich ähnliches realisieren lässt. Die Funktionsweise ist oft sehr ähnlich.

 

Verwendetes Theme (nicht notwendig!)

Sydney Theme (kostenlos)

 

Das komplette WordPress Tutorial

► WordPress Website erstellen

Google Maps ohne PlugIn als iFrame einbetten

Die schnellste Möglichkeit ist die Karte mithilfe eines iFrames auf der eigenen Website einzubinden.

Demo - Google Maps iFrame auf WordPress Website

So gehst du vor:

1. Gehe zu Google Maps

2. Gebe einen gewünschten Zielort ein. Bsp: „Musterstr. 5 Stuttgart“

3. Klicke auf „Teilen“.

Google Maps - Karte teilen Button

4. Anschließend auf den Reiter „Karte einbetten“

Google Maps - Teilen - Link senden oder Karten einbetten

5. Danach wird dir der Embed Code angezeigt. Diesen kannst du nun kopieren!

Google Maps - Karte einbetten - iFrame Code HTML kopieren

6. Jetzt fügst du diesen auf deiner WordPress Website in einem HTML oder Text Widget ein.

HTML iFrame Code in WordPress Text Widget einfügen

7. Fertig.

Fazit

Wie du sehen konntest, ist auch das Einbinden einer Karte mit WordPress eine leichte Aufgabe.

Ich hoffe meine Anleitung hat dir weitergeholfen und wünsche dir viel Spaß mit deiner neuen Karte von Google Maps!

Hat dir meine Anleitung gefallen? Dann gebe doch eine positive Bewertung 🙂

Oder empfehle ihn deinen besten Freunden! 😉

Starte jetzt mit deiner eigenen WordPress Website: zum WordPress Tutorial!

Patrick Ruh

Patrick Ruh

Im Jahr 2017 gründete er WP Wizard, um Selbstständigen und kleinen Unternehmen bei der Erstellung einer Webseite unter die Arme zu greifen. Er absolvierte seinen Master in Business Development, Produkt- und Start-up Management und studierte Internet Marketing, User Experience und Entrepreneurship in den USA. Seine Tutorials werden monatlich von mehreren Tausend Besuchern angeschaut und inzwischen von verschiedenen Universitäten, Hochschulen und Volkshochschulen genutzt, um in das Thema „WordPress“ einzuführen. Seit 2019 ist er Co-Founder und CMO bei timeBuzzer, einer Zeiterfassungslösung für Freiberufler und Unternehmen.

Aktueller Top Deal!

20% Rabatt auf das Divi Theme von Elegant Themes!

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit