Google Maps in WordPress einbetten (3 einfache Wege) 

Vor ein paar Wochen musste ich eine Google Map in WordPress für die Landingpage eines lokalen Kunden einbetten. Sie wollten, dass Kunden ihr physisches Geschäft leicht finden können, aber ich wollte ihre Website nicht verlangsamen oder mich mit Code herumschlagen.

Wenn Sie sich in der gleichen Situation befunden haben, wissen Sie, wie frustrierend das sein kann. Deshalb zeige ich Ihnen in diesem Tutorial drei einfache Möglichkeiten, Google Maps zu WordPress hinzuzufügen. Ich habe jede Methode in echten Projekten verwendet, daher führe ich Sie durch das, was für Landingpages, Blogbeiträge und einmalige Einbettungen am besten funktioniert.

Zusammenfassung der Methoden zum Einbetten von Google Maps in WordPress:

Bevor wir beginnen, welche Vorteile hat das Einbetten interaktiver Karten auf Ihrer Website?

Zum Beispiel kann eine eingebettete Google Map:

• Kunden helfen, ein Geschäft in ihrer Nähe mit Street View zu finden
• Besuchern den physischen Standort einer Veranstaltung anzeigen
• Blogbeiträge veranschaulichen, die sich mit bestimmten Orten befassen
• Den Standort Ihres Hauptsitzes anzeigen

Mit ein wenig Kreativität können Sie die interaktiven Karten von Google nutzen, um Ihre Website zum Leben zu erwecken. Und als Ergebnis sowohl Ihr Geschäftswachstum als auch Ihre potenziellen Kunden bedienen.

Benötigen Sie einen Google Maps API-Schlüssel?

Bevor Sie eine Google Map auf Ihrer WordPress-Website einbetten, ist es eine gute Idee, einen Google Maps API-Schlüssel zu erstellen, den Google jetzt benötigt. Um einen Google API-Schlüssel zu erhalten, folgen Sie den nachstehenden Schritten.

1. Gehen Sie zur Google Cloud Platform Console. Sie können ein kostenloses Konto erstellen, wenn Sie noch keines haben.

2. Wählen Sie ein vorhandenes Projekt oder erstellen Sie ein neues Projekt

3. Wählen Sie die Maps Embed API und klicken Sie auf der folgenden Seite auf Aktivieren.

4. Navigieren Sie nun zur Seitenleiste „Anmeldeinformationen“, klicken Sie auf die Option +Anmeldeinformationen erstellen und wählen Sie API-Schlüssel.

Sie sollten jetzt einen aktiven API-Schlüssel für Google Maps haben.

Google Maps in WordPress einbetten (3 Methoden)

Tauchen wir nun ein und zeigen Ihnen, wie Sie Google Maps in WordPress einbetten.

Methode 1: Google Maps mit SeedProd in WordPress-Landingpages einbetten

Die erste Methode in diesem Tutorial zeigt Ihnen, wie Sie Google Maps auf einer Landingpage in WordPress einbetten. Landingpages sind der beste Weg, um gezielten Traffic in Leads und Verkäufe umzuwandeln.

Und das beste WordPress-Landingpage-Plugin für diese Aufgabe ist SeedProd.

SeedProd ist ein Drag-and-Drop-Landingpage-Builder, mit dem Sie hochkonvertierende Landingpages und WordPress-Themes erstellen können, ohne Code schreiben zu müssen. Es kommt mit Hunderten von responsiven Landingpage-Vorlagen, die Sie im visuellen Front-End-Editor einfach anpassen können.

Darüber hinaus verfügt SeedProd über zahlreiche intelligente Inhaltsblöcke zum Hinzufügen benutzerfreundlicher Inhalte zu Ihrer Seite, darunter:

• Google Maps
• Kontaktformulare
• Call-to-Action-Buttons
• Preistabellen
• Bildkarussells
• Referenzen
• FAQ-Akkordeons
• Dynamischer Text
• Animierte Schlagzeilen
• Opt-in-Formulare
• Und mehr

Als Ergebnis können Sie schnell Landingpages erstellen, ohne einen Entwickler einstellen zu müssen.

Befolgen Sie die nachstehenden Schritte, um zu erfahren, wie Sie Google Maps mit SeedProd in WordPress-Landingpages einbetten.

1. Laden Sie das SeedProd Landing Page Plugin herunter

Der erste Schritt ist, das SeedProd-Plugin auf Ihren Computer herunterzuladen. Während SeedProd eine kostenlose Version anbietet, um kostenlose Landing Pages in WordPress zu erstellen, verwenden wir die Pro-Version – SeedProd Pro. Auf diese Weise können wir die erweiterten Inhaltsblöcke verwenden, die wir zuvor erwähnt haben. 

Klicken Sie also auf die Schaltfläche unten, um zu beginnen.

Installieren und aktivieren Sie als Nächstes SeedProd auf Ihrer Website. Wenn Sie dabei Hilfe benötigen, können Sie dieser Schritt-für-Schritt-Anleitung zum Installieren von WordPress-Plugins folgen.

Sobald Sie SeedProd installiert haben, sehen Sie einen Begrüßungsbildschirm, auf dem Sie nach Ihrem Lizenzschlüssel gefragt werden.

Sie finden Ihren Schlüssel, indem Sie sich in Ihr SeedProd-Konto einloggen und auf den Link Lizenzschlüssel, Details und Downloads anzeigen klicken.

Nachdem Sie Ihren Schlüssel kopiert haben, fügen Sie ihn in das Feld Lizenzschlüssel auf Ihrem SeedProd Begrüßungsbildschirm ein und klicken Sie auf die Schaltfläche Schlüssel überprüfen.

2. Erstellen Sie eine neue Landingpage

Jetzt können Sie mit der Erstellung Ihrer ersten Seite beginnen. Scrollen Sie also auf dem Begrüßungsbildschirm nach unten und klicken Sie auf die Schaltfläche Erstellen Sie Ihre erste Seite. Nachdem Sie auf diese Schaltfläche geklickt haben, gelangen Sie zum Landing-Page-Dashboard von SeedProd.

Auf dieser Seite sehen Sie zuerst die verschiedenen Landing-Page-Modi, die in SeedProd verfügbar sind, darunter:

• Wartungsmodus (Coming Soon)
• Wartungsmodus
• Anmelden
• 404

Die Seitenmodi von SeedProd ermöglichen es Ihnen, verschiedene Landing Pages mit einem einzigen Klick schnell zu aktivieren. 

Sie können zum Beispiel schnell einen Wartungsbildschirm aktivieren, wenn Sie kleinere Updates durchführen. Oder Sie können einen benutzerdefinierten WordPress-Login-Bildschirm aktivieren, um registrierte Benutzer willkommen zu heißen.

Der Hauptvorteil von Seitenmodi ist, dass Sie keine separaten WordPress-Plugins installieren müssen, um diese Funktionalität zu erhalten. SeedProd hat alles in einem einzigen kompakten Plugin integriert.

Unter dem Abschnitt Seitenmodi befindet sich eine Liste aller Seiten, die Sie mit SeedProd erstellen. Vorerst werden keine Seiten aufgeführt.

Um Ihre erste Seite zu erstellen, klicken Sie auf die Schaltfläche Neue Landing Page erstellen.

Wenn Sie auf die Schaltfläche klicken, gelangen Sie zum Bildschirm Landing-Page-Vorlagen von SeedProd. Hier sehen Sie Hunderte von professionell gestalteten Vorlagen, die Sie als Grundlage für Ihr Seitendesign verwenden können.

Oben befinden sich verschiedene Registerkarten, um die Designs zu filtern, wie zum Beispiel:

• Wartungsmodus (Coming Soon)
• Wartungsmodus
• 404-Seite
• Verkäufe
• Webinar
• Lead Squeeze
• Danke
• Anmelden

Bewegen Sie die Maus über ein beliebiges Design, das Ihnen gefällt, und klicken Sie auf das Häkchensymbol, um diese Vorlage zu importieren.

Wir verwenden für diese Anleitung die Vorlage Opportunities, die Sie unter der Überschrift Lead Squeeze finden.

Nachdem Sie auf das Häkchensymbol geklickt haben, um Ihre Vorlage zu importieren, sehen Sie ein Popup, in dem Sie aufgefordert werden, einen Namen für die Landing Page einzugeben. Da Ihr Seitenname automatisch Ihrer Landing-Page-URL zugewiesen wird, geben Sie ihr einen Namen, der für Ihre Besucher sinnvoll ist.

Sie können diese Einstellung später leicht ändern, wenn Sie einen Fehler machen. Klicken Sie also auf die Schaltfläche Speichern und Seite bearbeiten starten.

3. Passen Sie Ihr Seitendesign an

Wenn Sie Ihr Design importieren, wird es im visuellen Seiten-Editor von SeedProd geöffnet. Der Editor verfügt über ein benutzerfreundliches 2-Panel-Design, um die Anpassung Ihrer Seite sehr einfach zu gestalten:

1. Linkes Bedienfeld: Seitenblöcke und Abschnitte zum Erstellen und Anpassen Ihrer Seite
2. Rechtes Bedienfeld: Vorschau, wie Ihre Landingpage in Echtzeit aussieht

Oben im Editor befindet sich ein Navigationsmenü, um schnell zwischen Design, Integrationen und Seiteneinstellungen zu wechseln.

Und am unteren Rand des linken Bedienfelds befinden sich mehrere andere Symbole, die Ihnen bei der Navigation auf Ihrer Seite helfen, darunter:

• Globale Einstellungen: Steuern Sie Farben, Schriftarten und den Hintergrund Ihrer Seite global
• Layout-Navigation: Navigieren Sie schnell zu verschiedenen Teilen Ihres Designs
• Revisionsverlauf: Vorschau und Wiederherstellung einer älteren Version Ihres Designs
• Rückgängig und Wiederherstellen: Designänderungen rückgängig machen oder schnell wiederherstellen
• Mobile Vorschau: Vorschau des mobilen Designs Ihrer Landingpage

Die oben genannten Einstellungen erleichtern die Anpassung Ihrer Vorlage an Ihr Branding, Ihre Inhalte und Ihre Marketingziele.

Wenn Sie beispielsweise auf eine Seitenüberschrift klicken, können Sie die Textfarbe ändern und die Änderungen schneller in Echtzeit sehen.

Oder wenn Sie die Standardbilder ändern möchten, können Sie einfach auf ein Bild klicken, um die Einstellungen auf der linken Seite anzuzeigen. Dann können Sie es durch eines von Ihrem Computer, Ihrer Mediathek ersetzen oder ein kostenloses Stockfoto auswählen. 

4. Integrieren Sie den Google Maps Landing Page Block

Das Hinzufügen eines Google Maps Widgets zu Ihrer Landingpage ist unkompliziert.

Klicken Sie im linken Bedienfeld auf den Block Google Maps. Dann können Sie ihn in den Bereich der Seite ziehen, in dem er erscheinen soll.

Wenn Sie auf die Einstellungen des Google Maps Blocks klicken, können Sie schnell den anzuzeigenden Standort eingeben. Sie können dann auswählen, wie weit die Karte gezoomt ist, die Ausrichtung ändern und die Kartenbreite anpassen. 

Durch Auswahl des Tabs Erweitert können Sie verschiedene Rahmenstile auswählen und den Abstand um Ihre benutzerdefinierte Karte anpassen.

Passen Sie Ihre Landingpage weiter an, bis Sie mit dem Aussehen zufrieden sind. Denken Sie daran, auf die grüne Schaltfläche Speichern in der oberen rechten Ecke zu klicken, um Ihre Änderungen zu speichern.

5. Konfigurieren Sie Ihre Einstellungen

Nachdem Ihr Design fertig ist, gibt es einige Einstellungen, die Sie konfigurieren können, bevor Sie Ihre Landingpage veröffentlichen.

SeedProd ermöglicht es Ihnen, Ihre Landingpage einfach mit Ihrer E-Mail-Liste zu verbinden. Klicken Sie also oben auf dem Bildschirm auf Verbinden, um beliebte E-Mail-Marketingdienste anzuzeigen. Dies erleichtert es, Benutzer zum Abonnieren Ihres Newsletters aufzufordern und sie automatisch zu Ihrer E-Mail-Liste hinzuzufügen.

Nachdem Sie Ihre E-Mail-Liste verbunden haben, klicken Sie auf den Tab Seiteneinstellungen für weitere Optionen.

SeedProd bietet 5 Einstellungen, die Sie konfigurieren können, aber dies hängt oft von der Art der erstellten Seite und Ihrem aktuellen SeedProd-Plan ab.

1. Allgemein: Bearbeiten Sie den Namen und die URL Ihrer Seite oder wechseln Sie zwischen veröffentlicht und Entwurf.
2. SEO: Konfigurieren Sie Ihre SEO-Einstellungen mit einem WordPress SEO Plugin.
3. Analyse: Verfolgen Sie die Leistung Ihrer Seite mit einem Google Analytics Plugin.
4. Skripte: Fügen Sie benutzerdefinierte Skripte in Kopfzeilen, Körper und Fußzeilen Ihrer Seite ein, wie z. B. Tracking- und Retargeting-Pixel.
5. Benutzerdefinierte Domain: Geben Sie jeder Landingpage eine benutzerdefinierte Domain, die nicht mit Ihrer bestehenden Website verbunden ist.

Nachdem Sie Ihre Einstellungen konfiguriert haben, speichern Sie Ihre Änderungen und klicken Sie zurück zum Design-Tab.

6. Veröffentlichen Sie Ihre Landingpage

Bevor Sie Ihre Seite veröffentlichen, ist es wichtig sicherzustellen, dass Ihr Design mobilfreundlich ist. Wenn nicht, werden mobile Benutzer Schwierigkeiten haben, Ihre Seite zu navigieren, und Sie könnten potenzielle Leads und Conversions verlieren.

Glücklicherweise enthält SeedProd eine Option für die mobile Vorschau, um zu überprüfen, ob Ihre Seite mobilfreundlich ist. Klicken Sie einfach auf das mobile Symbol unten auf Ihrem Bildschirm.

Von dort aus können Sie sehen, wie Ihre Seite auf Mobilgeräten aussieht, und alles ändern, was nicht richtig aussieht oder funktioniert.

Wenn alles gut aussieht, klicken Sie auf den Pfeil nach unten neben der grünen Schaltfläche Speichern und dann auf Veröffentlichen.

Als Nächstes sehen Sie ein Fenster, das Ihnen mitteilt, dass Ihre Seite veröffentlicht wurde.

Um eine Live-Vorschau anzuzeigen, klicken Sie auf die Schaltfläche Live-Seite anzeigen.

Und hier ist eine Vorschau, wie Ihre Google Map aussieht:

Großartige Arbeit! Sie wissen jetzt, wie Sie eine Google Map zu Ihrer WordPress Landingpage hinzufügen.

Aber was ist, wenn Sie die Karte zu Ihren WordPress-Beiträgen hinzufügen müssen? Das zeigen wir Ihnen als Nächstes.

Methode 2: Google Maps in WordPress-Beiträgen und -Seiten mit einem Plugin hinzufügen

Wir empfehlen diese Methode, wenn Karten eine wichtige Rolle in Ihrem Unternehmen spielen und Sie sie in mehreren Beiträgen und Seiten auf Ihrer Website verwenden müssen. Wieder verwenden wir ein WordPress-Plugin, und dieses Mal verwenden wir MapPress Maps for WordPress, ein kostenloses WP Google Maps Plugin.

Installieren und aktivieren Sie das Plugin also auf Ihrem WordPress-Dashboard, um loszulegen. Klicken Sie dann auf Bearbeiten bei dem Beitrag oder der Seite, auf der Sie die Karte einbetten möchten.

Klicken Sie in Ihrem Beitrag oder Ihrer Seite auf das Symbol Plus (+) im Block-Editor (Gutenberg), um einen neuen WordPress-Block hinzuzufügen. Suchen Sie von dort nach dem Block MapPress Map und klicken Sie darauf, um die Karte zu Ihrem Beitrag hinzuzufügen.

Klicken Sie nun auf die Schaltfläche Kartenbibliothek und wählen Sie auf dem folgenden Bildschirm Neu hinzufügen.

Auf dem nächsten Bildschirm können Sie Ihren bevorzugten Kartenstandort in die Suchleiste eingeben und auf Speichern klicken.

Klicken Sie dann auf den Link In Beitrag einfügen, um Ihre Karte zu Ihrem WordPress-Editor hinzuzufügen.

Sie können nun das Dropdown-Panel Karteneinstellungen auf der rechten Seite verwenden, um die Größe und den Zoom Ihrer Google Map zu ändern.

Klicken Sie anschließend auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu speichern und eine Vorschau Ihrer neuen Karte anzuzeigen.

Methode 3: Manuelles Einbetten einer Google Map in WordPress mit einem iFrame

Sie können natürlich eine Google Map zu Ihrer WordPress-Website hinzufügen, ohne ein Plugin zu verwenden. Dazu müssen Sie die Google Maps-Website besuchen und nach dem Standort suchen, den Sie anzeigen möchten, z. B. Ihrem Filialfinder.

Klicken Sie von dort auf das Teilen-Symbol und dann auf den Tab Karte einbetten, der im Popup-Fenster erscheint. Klicken Sie dann auf die Schaltfläche HTML kopieren.

Klicken Sie nun in WordPress auf Bearbeiten bei einem beliebigen Beitrag oder einer Seite. Klicken Sie im WordPress Block-Editor auf das Symbol Plus (+), um einen neuen Block hinzuzufügen, und wählen Sie die Option Benutzerdefiniertes HTML, mit der Sie Code wie iframes, Shortcodes und mehr hinzufügen können.

Fügen Sie als Nächstes den Google Maps-Einbettungscode in den Block Benutzerdefiniertes HTML ein und klicken Sie auf Aktualisieren, um den Beitrag zu speichern.

Wenn Sie Ihren Beitrag in der Vorschau anzeigen, sollte Ihre Karte dem unten stehenden Beispiel ähneln.

FAQs zum Einbetten von Google Maps in WordPress

Sie kennen nun drei einfache Möglichkeiten, Google Maps in WordPress einzubetten. Sie können einen Landingpage-Builder, ein Plugin oder eine manuelle Einbettung mit einem iframe verwenden.

Wenn Sie die schnellste Methode wünschen, um eine Karte auf Ihrer Website anzuzeigen und das Design zu steuern, empfehle ich die Verwendung von SeedProd. Es ist dasselbe Tool, das ich für alle meine Kunden-Landingpages verwende, da es schnell, flexibel ist und mit jedem WordPress-Theme funktioniert.

Bereit, es auszuprobieren? Starten Sie noch heute mit SeedProd und fügen Sie in wenigen Minuten eine vollständig gebrandete Google Map zu Ihrer Website hinzu, ohne Code anfassen zu müssen.

Wenn Ihnen dieser Artikel gefallen hat, gefällt Ihnen vielleicht auch dieser Leitfaden zum Bearbeiten Ihrer WordPress-Fußzeile. Alternativ können Sie sich diese Top WordPress-Hosting-Anbieter ansehen.

Vielen Dank für Ihre Lektüre. Bitte folgen Sie uns auf YouTube, Twitter und Facebook für weitere hilfreiche Inhalte, um Ihr Geschäft auszubauen.