Letzte SeedProd Nachrichten

WordPress-Tutorials, -Tipps und -Ressourcen für das Wachstum Ihres Unternehmens

Wie man Google Maps in WordPress einbettet (3 einfache Wege)

Wie man Google Maps in WordPress einbettet (3 einfache Wege) 

Geschrieben von: Autorenbild Stacey Corrin
Autorenbild Stacey Corrin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.
     Bewertet von: Turner John
Kritikerbild Turner John
John Turner ist der Mitbegründer von SeedProd. Er verfügt über mehr als 20 Jahre Geschäfts- und Entwicklungserfahrung und seine Plugins wurden über 25 Millionen Mal heruntergeladen.

Möchten Sie Google Maps zu Ihrer WordPress-Website hinzufügen?

Das Hinzufügen von Inhalten wie Karten, Audio und Video zu Ihrer Website ist eine hervorragende Möglichkeit, ein interaktives Erlebnis für Ihre Besucher zu schaffen. Außerdem ist es eine hilfreiche Möglichkeit, den Nutzern die Informationen zu geben, die sie benötigen, um Ihre Geschäftsstandorte zu finden.

In diesem Artikel stellen wir Ihnen mehrere Methoden vor, mit denen Sie Ihrer WordPress-Website benutzerdefinierte Google Maps hinzufügen können.

Was sind die Vorteile der Einbettung interaktiver Karten auf Ihrer Website, bevor wir beginnen?

Warum sollten Sie Google Maps auf Ihrer Website einbetten?

Sie wissen bereits, dass die Einbettung von Google My Maps auf Ihrer Website eine hervorragende Möglichkeit ist, Ihre Website interaktiv zu gestalten. Aber es gibt noch weitere Vorteile, die Ihrem Unternehmen zu mehr Wachstum verhelfen können.

Zum Beispiel kann eine eingebettete Google-Karte:

  • Unterstützung der Kunden bei der Suche nach einem Geschäft in der Nähe ihres Wohnorts mit der Straßenansicht
  • Zeigen Sie den Teilnehmern den physischen Ort einer Veranstaltung
  • Veranschaulichung von Blogbeiträgen, die bestimmte Orte behandeln
  • Zeigen Sie den Standort Ihres Hauptsitzes an

Mit ein wenig Kreativität können Sie die interaktiven Karten von Google nutzen, um Ihre Website zum Leben zu erwecken. Und damit sowohl Ihrem Unternehmenswachstum als auch potenziellen Kunden dienen.

Abrufen eines Google Maps API-Schlüssels

Bevor Sie eine Google-Karte in Ihre WordPress-Website einbetten, sollten Sie einen Google Maps-API-Schlüssel erstellen, den Google jetzt benötigt. Um einen Google-API-Schlüssel zu erhalten, führen Sie die folgenden Schritte aus.

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

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

3. Wählen Sie die Maps Embed API und klicken Sie auf dem folgenden Bildschirm auf Aktivieren.

Google Maps einbetten api

4. Navigieren Sie nun zur Seitenleiste Credentials, klicken Sie auf die Option +Create Credentials und wählen Sie API Key.

Einen Google Maps API-Schlüssel erstellen

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

Jetzt wollen wir Ihnen zeigen, wie Sie Google Maps in WordPress einbetten können.

1. Wie man Google Maps in WordPress Landing Pages einbettet

Die erste Methode in diesem Tutorial zeigt Ihnen, wie Sie Google Maps in eine Landing Page in WordPress einbetten können. Landing Pages sind der beste Weg, um gezielten Traffic in Leads und Verkäufe umzuwandeln.

Und das beste WordPress-Landing-Page-Plugin für diesen Job ist SeedProd.

SeedProd bestes WordPress Landing Page Plugin

SeedProd ist ein Drag-and-Drop Landing Page Builder, mit dem Sie hochkonvertierende Landing Pages und WordPress-Themes erstellen können, ohne Code zu schreiben. Es enthält Hunderte von responsiven Landing Page-Vorlagen, die Sie im visuellen Front-End-Editor leicht anpassen können.

Darüber hinaus verfügt SeedProd über zahlreiche intelligente Inhaltsblöcke, mit denen Sie Ihrer Seite benutzerfreundliche Inhalte hinzufügen können, z. B:

So können Sie schnell Landing Pages erstellen, ohne einen Entwickler einstellen zu müssen.

Führen Sie die folgenden Schritte aus, um zu erfahren, wie Sie Google Maps mit SeedProd in WordPress-Landingpages einbetten können.

1. Laden Sie das SeedProd Landing Page Plugin herunter

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

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

Als nächstes installieren und aktivieren Sie SeedProd auf Ihrer Website. Wenn Sie dabei Hilfe benötigen, können Sie dieser Schritt-für-Schritt-Anleitung für die Installation von WordPress-Plugins folgen.

Sobald Sie SeedProd installiert haben, erscheint ein Begrüßungsbildschirm, in dem Sie nach Ihrem Lizenzschlüssel gefragt werden.

Aktivieren Sie das Plugin für den Seedprod-Wartungsmodus

Sie finden Ihren Schlüssel, indem Sie sich bei Ihrem SeedProd-Konto anmelden und auf den Link Lizenzschlüssel, Details und Downloads anzeigen klicken.

After copying your key, paste it into the License Key field on your SeedProd welcome screen and click the Verify Key button.

2. Erstellen Sie eine neue Landing Page

Erstellen Sie Ihre erste SeedProd-Landingpage

Jetzt können Sie mit der Erstellung Ihrer ersten Seite beginnen. Scrollen Sie also auf dem Willkommensbildschirm nach unten und klicken Sie auf die Schaltfläche " Create Your First Page ". Nachdem Sie auf diese Schaltfläche geklickt haben, gelangen Sie zum Landing Page Dashboard von SeedProd.

SeedProd Landing Page Modi

Auf dieser Seite sehen Sie zunächst die verschiedenen Landing Page-Modi, die in SeedProd verfügbar sind, einschließlich:

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

So können Sie beispielsweise schnell einen Wartungsbildschirm aktivieren, wenn Sie kleinere Aktualisierungen vornehmen. Oder Sie können einen benutzerdefinierten WordPress-Anmeldebildschirm aktivieren, um registrierte Benutzer zu begrüßen.

Der Hauptvorteil der 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 finden Sie eine Liste aller Seiten, die Sie mit SeedProd erstellt haben. Im Moment werden hier keine Seiten aufgeführt.

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

eine neue Landing Page erstellen

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

SeedProd Landing Page Vorlagen

Oben befinden sich verschiedene Registerkarten zum Filtern der Designs, z. B:

Bewegen Sie den Mauszeiger über ein beliebiges Design und klicken Sie auf das Häkchensymbol, um die Vorlage zu importieren.

Wählen Sie eine Landing Page-Vorlage

Für diesen Leitfaden verwenden wir die Vorlage Opportunities, die Sie unter der Überschrift Lead Squeeze finden können.

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

Geben Sie einen Landing Page-Namen und eine URL ein

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

3. Anpassen des Designs Ihrer Seite

SeedProd Drag & Drop Landing Page Builder

Wenn Sie Ihr Design importieren, wird es im visuellen Seiteneditor von SeedProd geöffnet. Der Editor verfügt über ein benutzerfreundliches 2-Panel-Design, mit dem Sie Ihre Seite ganz einfach anpassen können:

  1. Linker Bereich: Seitenblöcke und Abschnitte zum Erstellen und Anpassen Ihrer Seite
  2. Rechter Bereich: Vorschau darauf, wie Ihre Landing Page in Echtzeit aussieht

Am oberen Rand des Editors befindet sich ein Navigationsmenü, mit dem Sie schnell zwischen Ihrem Design, den Integrationen und den Seiteneinstellungen wechseln können.

SeedProd Landing Page Navigation

Unten auf der linken Seite befinden sich weitere Symbole, die Ihnen die Navigation auf Ihrer Seite erleichtern, z. B:

  • Globale Einstellungen: Steuern Sie die Farben, Schriftarten und den Hintergrund Ihrer Seite auf globaler Ebene.
  • Layout-Navigation: Schnelles Navigieren zu verschiedenen Teilen Ihres Entwurfs
  • Revisionsverlauf: Vorschau und Wiederherstellung einer älteren Version Ihres Entwurfs
  • Rückgängig machen und Wiederholen: Designänderungen rückgängig machen oder schnell wiederherstellen
  • Mobile Vorschau: Vorschau auf das mobile Design Ihrer Landing Page
Seedprod-Design-Kontrollen

Mit den oben genannten Einstellungen können Sie Ihre Vorlage ganz einfach an Ihr Branding, Ihre Inhalte und Ihre Marketingziele anpassen.

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

Anpassen Ihrer Landing Page in Echtzeit

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 ein Bild von Ihrem Computer oder aus Ihrer Mediathek ersetzen oder ein kostenloses Archivfoto auswählen. 

Anpassen der Bilder Ihrer Landing Page

4. Einbetten des Google Maps Landing Page Blocks

Das Hinzufügen eines Google Maps-Widgets zu Ihrer Landing Page ist ganz einfach.

Klicken Sie im linken Bereich auf den Google Maps-Block. Dann können Sie ihn auf den gewünschten Abschnitt der Seite ziehen.

Fügen Sie den seedprod google maps Block zu Ihrer Landing Page hinzu

Wenn Sie auf die Einstellungen des Google Map-Blocks klicken, können Sie schnell den Standort eingeben, den Sie anzeigen möchten. Sie können dann wählen, wie stark die Karte vergrößert werden soll, die Ausrichtung ändern und die Kartenbreite anpassen. 

Konfigurieren Sie Ihren Google Maps-Block

Wenn Sie die Registerkarte Erweitert auswählen, können Sie verschiedene Rahmenstile auswählen und die Abstände um Ihre benutzerdefinierte Map anpassen.

Einen Rahmen zu Google Maps hinzufügen

Fahren Sie mit der Anpassung Ihrer Landing Page fort, bis Sie mit ihrem Aussehen zufrieden sind. Vergessen Sie nicht, 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 Sie Ihr Design erstellt haben, können Sie noch einige Einstellungen vornehmen, bevor Sie Ihre Landing Page veröffentlichen.

Mit SeedProd können Sie Ihre Landing Page ganz einfach mit Ihrer E-Mail-Liste verbinden. Klicken Sie also auf " Verbinden" oben auf dem Bildschirm, um beliebte E-Mail-Marketingdienste zu sehen. So können Sie Nutzer ganz einfach auffordern, Ihren Newsletter zu abonnieren, und sie automatisch zu Ihrer E-Mail-Liste hinzufügen.

SeedProd E-Mail-Marketing-Integrationen

Nachdem Sie Ihre E-Mail-Liste verbunden haben, klicken Sie auf die Registerkarte Seiteneinstellungen, um weitere Optionen zu erhalten.

Einstellungen der Zielseite

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

  1. Allgemeines: Bearbeiten Sie den Namen und die URL Ihrer Seite oder wechseln Sie zwischen Veröffentlichung und Entwurf.
  2. SEO: Konfigurieren Sie Ihre SEO-Einstellungen mit einem WordPress SEO-Plugin.
  3. Analytik: Verfolgen Sie die Leistung Ihrer Seite mit einem Google Analytics-Plugin.
  4. Skripte: Fügen Sie benutzerdefinierte Skripte wie Tracking- und Retargeting-Pixel in die Kopf-, Körper- und Fußzeilen Ihrer Seite ein.
  5. Benutzerdefinierte Domain: Geben Sie jeder Landing Page eine eigene Domain, die nicht mit Ihrer bestehenden Website verbunden ist.

Nachdem Sie Ihre Einstellungen konfiguriert haben, speichern Sie Ihre Änderungen und klicken Sie zurück auf die Registerkarte Design.

6. Veröffentlichen Sie Ihre Landing Page

Bevor Sie Ihre Seite veröffentlichen, sollten Sie sicherstellen, dass Ihr Design mobilfreundlich ist. Wenn dies nicht der Fall ist, werden mobile Nutzer Schwierigkeiten haben, auf Ihrer Seite zu navigieren, und Sie könnten möglicherweise Leads und Konversionen verlieren.

Glücklicherweise bietet SeedProd eine mobile Vorschauoption, mit der Sie überprüfen können, ob Ihre Seite mobilfreundlich ist. Klicken Sie einfach auf das Mobil-Symbol am unteren Rand Ihres Bildschirms.

Klicken Sie auf das Symbol für die mobile Vorschau

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

Vorschau und Bearbeitung Ihrer Landing Page für mobile Geräte

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

Veröffentlichen Sie Ihre Landing Page mit goolge maps

Danach erscheint ein Fenster, das Ihnen mitteilt, dass Ihre Seite veröffentlicht wurde.

Ihre Zielseite ist jetzt veröffentlicht

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

Vorschau der Landing Page

Und hier sehen Sie eine Vorschau, wie Ihre Google-Karte aussieht:

Vorschau der Landing Page mit Google Maps

Gute Arbeit! Sie wissen jetzt, wie Sie Ihrer WordPress-Landingpage eine Google-Karte hinzufügen können.

Was aber, wenn Sie die Karte zu Ihren WordPress-Beiträgen hinzufügen möchten? Wir zeigen Ihnen als Nächstes, wie Sie das machen.

2. Wie man Google Maps in WordPress-Beiträge einfügt (mit einem Plugin)

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 für WordPress, ein kostenloses wp Google Maps Plugin.

MapPress Karten für WordPress Plugin

Installieren und aktivieren Sie das Plugin in Ihrem WordPress-Dashboard, um loszulegen. Klicken Sie dann auf "Bearbeiten" für den Beitrag oder die Seite, in die Sie die Karte einbetten möchten.

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

Fügen Sie den MapPress Map WordPress-Block hinzu

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

Geben Sie Ihren Standort auf der Karte ein

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

Karte in Beitrag einfügen

Klicken Sie anschließend auf den Link In Beitrag einfügen , um Ihre Karte in den WordPress-Editor einzufügen.

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

Konfigurieren Sie die Einstellungen für die Kartengröße

Klicken Sie anschließend auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu speichern und eine Vorschau auf Ihre neue Map zu erhalten.

Vorschau Ihrer Google-Karte in WordPress

3. Manuelles Hinzufügen einer Google-Karte in WordPress

Natürlich können Sie Ihrer WordPress-Website eine Google-Karte hinzufügen, ohne ein Plugin zu verwenden. Dazu müssen Sie die Google Maps-Website besuchen und nach dem Ort suchen, den Sie anzeigen möchten, z. B. den Standort Ihres Geschäfts.

Suchen Sie auf Google Maps und klicken Sie auf die Schaltfläche Teilen

Klicken Sie dort auf das Freigabesymbol und dann auf die Registerkarte Karte einbetten, die im Popup-Fenster erscheint. Klicken Sie dann auf die Schaltfläche HTML kopieren.

Kopieren Sie den Google Maps-Einbettungscode

Klicken Sie nun auf einen beliebigen Beitrag oder eine Seite in WordPress. Klicken Sie im WordPress-Block-Editor auf das Plus-Symbol (+), 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 den Einbettungscode in den benutzerdefinierten HTML-Block ein

Fügen Sie anschließend den Google Maps-Einbettungscode in den benutzerdefinierten HTML-Block ein und klicken Sie auf Aktualisieren, um den Beitrag zu speichern.

Wenn Sie Ihren Beitrag in der Vorschau anzeigen, sollte Ihre Karte ähnlich wie das folgende Beispiel aussehen.

Vorschau Ihrer Google Maps in WordPress

Das war's!

Sie wissen jetzt, wie Sie Google Maps manuell und mit leistungsstarken WordPress-Plugins in WordPress einbetten können.

Wenn Ihnen dieser Artikel gefallen hat, gefällt Ihnen vielleicht auch diese Anleitung zum Bearbeiten Ihrer WordPress-Fußzeile. Oder sehen Sie sich diese Top-WordPress-Hosting-Anbieter an.

Vielen Dank für die Lektüre. Bitte folgen Sie uns auf YouTube, Twitter und Facebook, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.

Autorenavatar
Stacey Corrin Autorin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.

Offenlegung: Unser Inhalt wird von den Lesern unterstützt. Das heißt, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie einen Mehrwert für unsere Leser darstellen.