Google Maps in WordPress einbinden: So geht's

Google Maps in WordPress einbinden ist eine Aufgabe von fünf Minuten. Es stärkt das Vertrauen, verbessert Ihre lokale SEO und macht es Kunden leichter, bei Ihnen zu kaufen. Doch sicherzustellen, dass die Karte korrekt angezeigt wird und alle benötigten Funktionen bietet, kann Stunden dauern. Und wenn Sie mobile Nutzer nicht berücksichtigen, bemerken Sie möglicherweise gar nicht, dass die Karte auf kleinen Bildschirmen abgeschnitten wird.

Dieser Leitfaden zeigt Ihnen drei Möglichkeiten, wie Sie Karten in Ihre WordPress-Website einbinden können: per nativem iFrame, per Karten-Plug-in und per kostenlosem Widget. Außerdem gehen wir auf mögliche Probleme und Vor- und Nachteile ein, damit Sie die beste Option für sich wählen können.

Watch on youtube

How to Customize and Embed Google Maps on Your WordPress Site

Drei Möglichkeiten, Google Maps in WordPress einzubinden

Option 1: Einen nativen Google Maps iFrame verwenden

Die Google Maps iFrame-Option ist der einfachste und schnellste Weg, eine Karte auf Ihrer Website einzubinden. Sie suchen Ihr Unternehmen auf Google Maps, klicken auf Teilen, kopieren den Code und fügen ihn auf einer WordPress-Seite ein. Weiter unten finden Sie eine Schritt-für-Schritt-Anleitung, damit Sie schnell loslegen können.

Die Einfachheit erweist sich jedoch zugleich als Einschränkung. Sie können das Aussehen der Karte nicht anpassen, keine mehreren Pins hinzufügen und keine zusätzlichen Informationen über der Standardansicht anzeigen. Außerdem müssen Sie mit Kartengrößen und Ihren WordPress-Seitenlayouts experimentieren, um sicherzustellen, dass die Karte auch auf Mobilgeräten nutzbar ist.

So binden Sie einen Google Maps iFrame ein

Bevor Sie beginnen, registrieren Sie Ihr Unternehmen auf der Plattform Google Unternehmensprofil. So können Sie Ihre vollständigen Informationen in Google Maps anzeigen lassen, einschließlich Öffnungszeiten, Bewertungen oder Ihrer Speisekarte. Wenn Sie nur auf eine Adresse verweisen möchten, die nicht Ihnen gehört, oder auf eine Sehenswürdigkeit, springen Sie direkt zum ersten Schritt.

Einbettungscode von Google Maps abrufen

1. Gehen Sie zu google.com/maps und suchen Sie nach Ihrem Unternehmensnamen oder Ihrer Adresse.

2. Vergewissern Sie sich, dass Sie den richtigen Pin ausgewählt haben, indem Sie die Unternehmensdetails auf der linken Seite des Bildschirms überprüfen.

3. Klicken Sie auf Teilen.

4. Ein Popup erscheint auf dem Bildschirm. Klicken Sie auf den Tab Karte einbetten.

5. Eine Vorschau der Karte, wie sie auf Ihrer Website aussehen wird, erscheint. Standardmäßig ist die mittlere Größe eingestellt; Sie können eine kleine oder große Karte wählen oder über das Dropdown-Menü oben links sogar eine benutzerdefinierte Größe festlegen.

6. Nachdem Sie die Größe ausgewählt haben, klicken Sie auf HTML kopieren. Dadurch wird der iFrame-Code in die Zwischenablage kopiert.

In WordPress einbetten (Block-Editor/Gutenberg)

7. Öffnen Sie in WordPress die Seite oder den Beitrag, auf der/dem Sie die Karte platzieren möchten.
8. Klicken Sie auf das +-Symbol zum Einfügen von Blöcken, geben Sie HTML ein, um zu filtern, und klicken Sie auf Eigenes HTML, um den Block zur Seite hinzuzufügen.

9. Klicken Sie im neuen Block auf HTML bearbeiten.

10. Fügen Sie den iFrame-Code in das Popup ein. Die Vorschau wird auf der rechten Seite angezeigt. Klicken Sie auf Aktualisieren, um den Vorgang abzuschließen.

11. Die Seite zeigt nun die eingebettete iFrame-Karte an. Klicken Sie auf Veröffentlichen oder Speichern, um sie auf Ihrer Website live zu schalten, und rufen Sie die Seite auf, um zu sehen, wie sie aussieht.

Falls dies nicht der Art entspricht, wie Sie Seiten in WordPress bearbeiten, erfahren Sie hier, wie Sie HTML mit einem der folgenden Editoren hinzufügen:

• WordPress Classic Editor
• Elementor HTML-Widget
• Divi Code-Modul

Option 2: Ein dediziertes WordPress-Karten-Plug-in installieren

Im Vergleich zu Option 1 bietet ein dediziertes WordPress-Plug-in mehr Anpassungsmöglichkeiten und Funktionalität. Sie installieren es auf Ihrer Website genauso wie jedes andere Plug-in, erstellen Ihren Google Maps API-Schlüssel, fügen ihn in die Einstellungen ein und platzieren dann das Kartenelement auf einer Seite.

Diese Option bringt etwas mehr Komplexität mit sich. Um den Google Maps API-Schlüssel zu erhalten, müssen Sie ein Konto in der Google Cloud Platform erstellen, ein Rechnungskonto einrichten und einen technischen Einrichtungsprozess durchlaufen. Außerdem arbeiten die Karten-Plug-ins nach dem Freemium-Modell: Sie bieten einen brauchbaren kostenlosen Tarif mit Grundfunktionen, die besten Funktionen sind jedoch hinter einer Einmallizenz oder einer Jahresgebühr verborgen.

Sie fügen Ihrer Website ein weiteres Plug-in hinzu – testen Sie daher nach Abschluss der Einrichtung die Ladegeschwindigkeit Ihrer Website. Wenn Sie Ihre Seite auf einem günstigen Hosting-Tarif betreiben, können zu viele Plug-ins alles erheblich verlangsamen, was die Nutzererfahrung beeinträchtigt und möglicherweise dazu führt, dass Besucher die Seite verlassen.

Ob die Karte für mobile Nutzer funktional ist, hängt vom Plug-in und Ihrer Konfiguration ab. WP Go Maps empfiehlt beispielsweise, bestimmte Höhen- und Breitenwerte festzulegen, um eine zu kleine Darstellung zu vermeiden.

So richten Sie ein WordPress-Karten-Plug-in ein

Für dieses Beispiel verwende ich eines der beliebtesten Google Maps Plug-ins für WordPress, WP Go Maps.

WP Go Maps einrichten

1. Installieren und aktivieren Sie WP Go Maps.

2. Klicken Sie auf Einführung überspringen, um die Einrichtung abzuschließen.

3. Klicken Sie im Menü auf der linken Seite auf Einstellungen.

4. Wählen Sie im Tab „Allgemein” Google Maps als Karten-Engine aus.

Google Maps API-Schlüssel abrufen

Um die Kartendaten von der Google-Plattform abzurufen, müssen Sie sich zunächst für ein Konto registrieren, um Ihren API-Schlüssel zu erhalten.

5. Gehen Sie zur Google Maps Platform-Website und erstellen Sie ein Konto.

6. Sie werden zu einem Konfigurationsablauf in der Google Cloud Platform weitergeleitet. Erstellen Sie ein neues Rechnungskonto, indem Sie einen Namen, ein Land und eine Währung festlegen.

7. Geben Sie Ihre Kontaktinformationen und Zahlungsmethode ein. Klicken Sie anschließend auf die Schaltfläche Absenden und Abrechnung aktivieren.



Bei dieser Option erhalten Sie 10.000 kostenlose Kartenaufrufe pro Monat; wenn Sie dieses Limit überschreiten, fallen 7 $ pro 1.000 Aufrufe an. Solange Sie unter dem Limit bleiben, wird Ihre Karte nie belastet – das Rechnungskonto ist jedoch in jedem Fall erforderlich. (Im März 2025 hat Google sein altes monatliches Guthaben von 200 $ durch ein separates kostenloses Kontingent für jede API ersetzt; viele ältere Tutorials erwähnen dieses Guthaben noch, aber es existiert nicht mehr.)

8. Google stellt Ihnen einige Fragen dazu, wie Sie den Maps-Dienst nutzen möchten. Beantworten Sie diese und klicken Sie auf Absenden.

9. Klicken Sie im Menü auf der linken Seite auf Schlüssel & Anmeldedaten.

10. Klicken Sie auf das Dropdown-Menü Anmeldedaten erstellen und dann auf API-Schlüssel.

11. Im erscheinenden Modal können Sie den Namen und die Berechtigungen Ihres neuen API-Schlüssels festlegen. Sie müssen diese Einstellungen nicht ändern; scrollen Sie ganz nach unten und klicken Sie auf Erstellen.

12. Kopieren Sie den API-Schlüssel.

Es ist wichtig, Ihren Schlüssel einzuschränken, bevor Ihre Website live geht. Ein uneingeschränkter Schlüssel im Quellcode Ihrer Seite kann kopiert und missbraucht werden, um Ihre Kosten in die Höhe zu treiben. Befolgen Sie die Best Practices für API-Schlüssel von Google, um ihn auf Ihre Domain zu beschränken.

Plug-in-Einrichtung in WordPress abschließen

13. Gehen Sie zurück zur Einstellungsseite des WP Go Maps-Plug-ins in Ihrer WordPress-Installation und fügen Sie den API-Schlüssel in das Feld „Google Maps API Key” ein. Klicken Sie anschließend auf die Schaltfläche Einstellungen speichern.

14. Klicken Sie im Menü auf der linken Seite auf Karten.

15. Das Plug-in hat bereits die erste Karte für Sie erstellt. Klicken Sie auf die Schaltfläche Bearbeiten, um sie anzuzeigen.

16. Hier konfigurieren Sie, wie Ihre Karte auf Ihrer Website angezeigt wird. Klicken Sie auf den Tab Markierungen, um Ihr Unternehmen hinzuzufügen.

17. Klicken Sie auf das Drei-Punkte-Menü und löschen Sie die voreingestellte Kartenmarkierung.

18. Klicken Sie oben auf Markierung hinzufügen.

19. Suchen Sie nach der Adresse Ihres Unternehmens und wählen Sie sie aus, sobald sie in der Liste erscheint.

20. Klicken Sie auf die Schaltfläche Markierung hinzufügen, um den Vorgang abzuschließen.

21. Ihr Unternehmen ist jetzt auf der Karte markiert. Sie können die Zoomstufe und andere visuelle Einstellungen anpassen, indem Sie zurückgehen und auf die Schaltfläche Einstellungen klicken. Denken Sie daran, am unteren Bildschirmrand auf Karte speichern zu klicken, wenn Sie fertig sind.

22. Wenn Sie bereit sind, Ihre Karte auf einer Seite Ihrer Website zu platzieren, klicken Sie unten links auf die Schaltfläche Shortcode kopieren. Dadurch wird der Shortcode in Ihre Zwischenablage kopiert.

23. Gehen Sie zu der Seite, auf der Sie Ihre Karte hinzufügen möchten, klicken Sie auf das Pluszeichen, um einen neuen Block hinzuzufügen, und geben Sie Shortcode ein, um die Optionen zu filtern. Klicken Sie darauf, sobald es erscheint.

24. Fügen Sie den Shortcode in das Eingabefeld ein und klicken Sie auf Veröffentlichen oder Speichern.

25. Wenn Sie die Seite aufrufen, zeigt die Karte Ihre Markierung mit den von Ihnen gewählten Einstellungen an.

Option 3: Ein kostenloses, anpassbares Google Maps-Widget hinzufügen (empfohlen)

Das Jotform Google Maps-Widget ist eine kostenlose und vollständig anpassbare Karte, für die weder ein Plug-in installiert noch eine Lizenzgebühr bezahlt werden muss. Damit können Sie

• Einen oder mehrere Standorte hinzufügen, die auf derselben Karte angezeigt werden.
• Die Kartenansicht auswählen, einschließlich Straßenkarte oder Satellit.
• Ein helles oder dunkles Design verwenden, mit Steuerung des Eckenradius für Boxen.
• Die Größe, das Layout und die Zoomstufe der Karte festlegen.

Im Vergleich zu nativen iFrames ist es anpassbar, ermöglicht mehrere Pins auf derselben Karte und ist von Haus aus responsiv. Im Vergleich zu einem Plug-in belastet es Ihre Website nicht und erfordert keinen kostenpflichtigen Plan, um alle Funktionen freizuschalten.

Trotz dieser Vorteile benötigt das Jotform Google Maps-Widget dennoch einen Google Maps API-Schlüssel. Sie müssen die Einrichtungsschritte durchlaufen und ein Rechnungskonto bei Google erstellen.

So fügen Sie das Jotform Google Maps-Widget zu Ihrer Website hinzu

1. Besuchen Sie die Jotform Google Maps-Widget-Seite. In den meisten Fällen wird das Konfigurationstool automatisch geladen; falls nicht, klicken Sie auf Neues Website-Widget erstellen, um zu beginnen.

2. Folgen Sie dieser Anleitung, um Ihren Google Maps API-Schlüssel zu erhalten. Sie umfasst alle in Option 2 beschriebenen Schritte sowie Hinweise zur Einschränkung Ihres Schlüssels, um ihn sicher zu halten. (Denken Sie daran, dass Google Maps jeden Monat 10.000 kostenlose Kartenaufrufe erlaubt. Jede weiteren 1.000 Aufrufe kosten 7 $.) Wenn Sie fertig sind, fügen Sie Ihren Google Maps API-Schlüssel in das Eingabefeld ein.

3. Passen Sie die allgemeinen Einstellungen nach Ihren Wünschen an. Dazu gehört, wie die Karte aussehen soll und wie viele Standorte Sie hinzufügen möchten. Die Screenshots hier verwenden die Jotform-Büros in San Francisco und Kanada, um eine Karte mit mehreren Pins zu zeigen, aber Sie können einen einzelnen Standort oder so viele wie nötig hinzufügen. Klicken Sie auf Weiter, wenn Sie fertig sind.

4. Ändern Sie Stileinstellungen wie Design, Schriftart oder benutzerdefiniertes CSS. Klicken Sie auf Weiter, wenn Sie fertig sind.

5. Passen Sie in diesem letzten Schritt das Layout und die Zusatzfunktionen an. Klicken Sie auf Kostenlos auf Ihrer Website ausprobieren, wenn Sie bereit sind.

6. Erstellen Sie ein kostenloses Jotform-Konto oder melden Sie sich bei einem bestehenden an. Der Einbettungscode wird nach der Anmeldung angezeigt. Klicken Sie auf Code kopieren.

7. Fügen Sie den Einbettungscode mit einem benutzerdefinierten HTML-Block zu Ihrer Seite hinzu, indem Sie die Schritte 7–11 aus Option 1 befolgen: Fügen Sie den Block ein, fügen Sie den Code ein und klicken Sie dann auf Veröffentlichen oder Speichern.

8. Öffnen Sie die Seite auf Ihrem Smartphone. Anders als beim nativen iFrame in Option 1 passt sich das Widget automatisch an die Bildschirmgröße an, sodass die Karte, die auf dem Mobilgerät dort abgeschnitten wurde, hier vollständig angezeigt wird.

Erweitern Sie Ihre WordPress-Website mit smarten, serverlosen Widgets

Smarte Funktionen in Ihre Website einzubauen bedeutet normalerweise, für neue Plug-ins zu bezahlen oder sich mit Code herumzuschlagen. Jotform hilft Ihnen, all das zu überspringen: Neben dem Google Maps-Widget bietet das Jotform Website-Widgets-Verzeichnis über 150 kostenlose No-Code-Widgets, die sich einfach durch Einfügen eines HTML-Snippets auf Ihrer Website konfigurieren lassen.

Diese Optionen ergänzen das Maps-Widget ideal:

• Öffnungszeiten-Widget: Dieses Widget zeigt die Öffnungszeiten an, einschließlich eines Live-Status „Geöffnet” oder „Geschlossen”, den Sie neben Ihrer Karte platzieren können, damit Besucher, die Sie auf der Karte finden, sofort wissen, ob Sie geöffnet haben. Kein API-Schlüssel erforderlich.
• Terminbuchungs-Widget: Fügen Sie Ihrer Website eine Buchungsfunktion hinzu, damit Besucher einen Termin bei Ihnen vereinbaren können. Dieses Widget unterstützt das Hinzufügen von Verfügbarkeiten, die Auflistung Ihrer Dienstleistungsarten mit Dauer und Preis sowie die Annahme von Reservierungen – ohne ein zusätzliches Tool.
• FAQ-Widget: Dieses Widget listet Antworten auf häufig gestellte Fragen in einem durchsuchbaren Akkordeon auf. Dasselbe in WordPress umzusetzen ist zwar einfach, aber das professionelle Ergebnis, das dieses Widget bietet, würde bedeuten, sich mit Code auseinanderzusetzen oder noch ein weiteres Plug-in zu installieren.

Wenn Sie einen Einsteiger-WordPress-Hostingplan nutzen, verbrauchen Plug-ins wichtige Serverressourcen, verlangsamen Ihre Website und bieten Ihren Besuchern eine schlechte Nutzererfahrung. Die Widgets von Jotform laufen auf der Jotform-Infrastruktur, sodass Ihre Website nicht belastet wird. Das gibt Serverressourcen frei und macht Ihre Website schneller und benutzerfreundlicher.

Möchten Sie Ihre WordPress-Website auf das nächste Level bringen? Dann schauen Sie sich Folgendes an:

• Unsere Anleitung Wie man WordPress nutzt, um zu lernen, wie Sie eine professionelle Website erstellen, ohne in einen Webdesign-Kurs zu investieren
• Die WordPress-Integration von Jotform, die Ihre Datenerfassung mit Automatisierung, Zahlungen und erweiterten Funktionen auf einer einzigen Plattform optimiert