WordPress: Google Maps einbinden – [PlugIn + API] oder [ohne PlugIn]

WordPress Tutorial MockUp + Google Maps Icon

 

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

 

 

 

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.

 

 

Sprungmarken

Sprungmarken:

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)

 

 

Benötigte PlugIns + Verwendetes Theme

Benötigte PlugIns:

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

 

Verwendetes Theme (nicht notwendig!)

Sydney Theme (kostenlos)

 

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.

 

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 🙂

WordPress: Google Maps einbinden – [PlugIn + API] oder [ohne PlugIn]
5 (100%) 1 vote

 

Oder empfehle ihn deinen besten Freunden! 😉

 

Patrick
23 Jahre, Student. In und neben meinem Studium beschäftige ich mich intensiv mit Internet Marketing, Webdesign, User Experience, Usability und Suchmaschinenoptimierung. Meine Freizeit widme ich dem Schlagzeug spielen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Cookies. Weitere Informationen.
X