Das Einfügen mehrerer Google Maps-Karten auf einer einzigen Seite in WordPress ist eine der einfachsten Möglichkeiten, Besuchern alle Ihre Standorte anzuzeigen, ohne sie auf separate Seiten weiterzuleiten.
Das ist mir selbst schon passiert, als ich verschiedene Standorte für ein lokales Unternehmen verwaltet habe. Jeder Standort benötigte eine eigene Karte, und ich wollte nicht, dass die Leute erst umherklicken mussten, um eine Wegbeschreibung zu erhalten.
In dieser Anleitung zeige ich Ihnen zwei einsteigerfreundliche Methoden, wie Sie das bewerkstelligen können. Bei der einen Methode wird ein Page Builder mit einem Google Maps-Block per Drag-and-Drop verwendet. Bei der anderen Methode wird der kostenlose Einbettungscode von Google Maps direkt verwendet.
Was du benötigst: Eine WordPress-Website mit Administratorrechten und ein kostenloses Google-Konto. Wenn du die Drag-and-Drop-Methode nutzen möchtest, benötigst du außerdem SeedProd Pro.
Methode 1. Mehrere Google Maps auf einer Seite mit SeedProd hinzufügen
Die erste Methode in diesem Tutorial zeigt Ihnen, wie Sie mehrere Google Maps auf einer Landing Page in WordPress hinzufügen können.
Landing Pages sind der beste Weg, um gezielten Traffic in Leads und Verkäufe umzuwandeln. Wenn Sie also für eine Veranstaltung oder Rabatte in lokalen Geschäften werben, ist eine Landing Page mit mehreren Karten der ideale Weg, um Menschen durch die Tür zu bringen.
Und das beste WordPress-Landing-Page-Plugin für diesen Job ist SeedProd.
SeedProd ist ein visueller WordPress-Landingpage- und Website-Builder, mit dem Sie Seiten mit hoher Konversionsrate erstellen können, ohne Programmierkenntnisse zu benötigen. Es enthält Hunderte von responsiven Landingpage-Vorlagen, die Sie im Drag-and-Drop-Editor 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:
- Google Maps
- Call-to-Action-Schaltflächen
- Preistabellen
- Bildkarussells
- Testimonials
- Dynamischer Text
- Animierte Schlagzeilen
- Optin-Formulare
- Und mehr
Das bedeutet, dass Sie jede Seite schnell erstellen können, ohne einen Entwickler einstellen zu müssen.
Folgen Sie den nachstehenden Schritten, um zu erfahren, wie Sie Google Maps auf einer Seite in WordPress mit SeedProd hinzufügen können.
Video-Anleitung
Schritt 1. Laden Sie das SeedProd Landing Page Plugin herunter
Besuchen Sie zunächst die Website von SeedProd und laden Sie das SeedProd-Plugin auf Ihren Computer herunter.
Obwohl SeedProd eine kostenlose Version hat, werden wir für dieses Tutorial SeedProd Pro verwenden. Auf diese Weise können wir den Google Maps-Block verwenden.
Nachdem Sie das Plugin heruntergeladen haben, installieren und aktivieren Sie es auf Ihrer Website. Wenn Sie Hilfe bei diesem Schritt benötigen, folgen Sie dieser Schritt-für-Schritt-Anleitung für die Installation von WordPress-Plugins.
Sobald Sie SeedProd installiert haben, erscheint ein Begrüßungsbildschirm, in dem Sie nach Ihrem Lizenzschlüssel gefragt werden. Geben Sie Ihren Schlüssel ein und klicken Sie auf die Schaltfläche " Schlüssel überprüfen", um Ihre Lizenz zu aktivieren.
Hinweis: Sie können Ihren Schlüssel finden, indem Sie sich bei Ihrem SeedProd-Konto anmelden und auf den Link Lizenzschlüssel, Details und Downloads anzeigen klicken.
Schritt 2. Erstellen Sie eine neue Landing Page
Nachdem Sie Ihren Lizenzschlüssel aktiviert haben, scrollen Sie auf dem Begrüßungsbildschirm nach unten und klicken Sie auf die Schaltfläche Erstellen Sie Ihre erste Seite.
Von dort aus gelangen Sie zum Dashboard der Landing Page von SeedProd.
Auf dieser Seite gibt es mehrere Landing Page-Modi, darunter:
- Demnächst verfügbar
- Wartungsmodus
- Anmeldung
- 404
Und mit diesen Seitenmodi können Sie verschiedene Landing Pages mit einem einzigen Klick aktivieren. So können Sie beispielsweise den Wartungsmodus aktivieren, wenn Sie kleinere Aktualisierungen vornehmen.
Klicken Sie unter dem Abschnitt Seitenmodi auf die Schaltfläche Neue Landing Page erstellen, um Ihre erste Seite zu erstellen.
Auf dem nächsten Bildschirm können Sie aus Hunderten von vorgefertigten Landing Page-Vorlagen wählen. Wählen Sie einfach per Mausklick eine Vorlage aus, um sie als Startpunkt zu verwenden.
Nachdem Sie eine Vorlage ausgewählt haben, öffnet sich ein Popup-Fenster, in dem Sie aufgefordert werden, Ihre Seite zu benennen und die URL einzugeben.
Klicken Sie dann auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen, um Ihre Vorlage zu starten.
Schritt 3. Anpassen Ihrer Landing Page
Wenn Sie Ihr Design starten, wird es im SeedProd Page Builder geöffnet. Der Editor verfügt über ein benutzerfreundliches 2-Panel-Design, mit dem Sie Ihre Seite leicht anpassen können:
- Linker Bereich: Blöcke und Abschnitte zum Erstellen und Anpassen Ihrer Seite
- Rechter Bereich: Live-Vorschau auf Ihre Landing Page in Echtzeit
Am oberen Rand des Editors befindet sich ein Navigationsmenü, mit dem Sie schnell zwischen Ihrem Design, den Integrationen und den Einstellungen wechseln können.
Unten auf der linken Seite befinden sich weitere Symbole zum Rückgängigmachen und Wiederherstellen von Änderungen, zum Umschalten auf die mobile Vorschau und vieles mehr.
Mit diesen Einstellungen können Sie Ihr Design leichter anpassen, um die Ziele Ihrer Landing Page zu erreichen. Wenn Sie zum Beispiel auf eine Seitenüberschrift klicken, können Sie den Inhalt und die Farbe ändern und die Änderungen in Echtzeit sehen.
Um die Standardvorlagenbilder zu ersetzen, können Sie auf ein beliebiges Bild klicken und es durch ein Bild von Ihrem Computer oder aus Ihrer Mediathek ersetzen oder ein kostenloses Archivfoto auswählen.
Passen Sie Ihr Design weiter an, bis Sie mit dem Aussehen zufrieden sind. Vergessen Sie nicht, auf die Schaltfläche " Speichern" in der oberen rechten Ecke zu klicken.
Schritt 4. Mehrere Google Maps zu Ihrer Landing Page hinzufügen
Das Hinzufügen mehrerer Google Maps zu Ihrer Landing Page ist mit dem in SeedProd integrierten Google Maps-Block ganz einfach.
Fügen wir zunächst einige Spalten für die einzelnen Karten hinzu. Klicken Sie im linken Bedienfeld auf den Spaltenblock und ziehen Sie ihn in einen Abschnitt auf Ihrer Seite.
Wählen Sie nun aus, wie viele Spalten Sie anzeigen möchten. Für diesen Leitfaden haben wir uns für das 3-spaltige Layout entschieden.
Jetzt können Sie Google Maps zu jeder Spalte hinzufügen.
Dazu klicken Sie auf den Google Maps-Block und ziehen ihn in die erste Spalte.
Wenn Sie auf die Blockeinstellungen klicken, öffnet sich ein Fenster, in dem Sie den gewünschten Ort eingeben können. Sie können dann den Zoom der Karte wählen, die Ausrichtung ändern und die Breite anpassen.
Außerdem können Sie auf der Registerkarte Erweitert " verschiedene Rahmenstile auswählen und die Abstände um Ihre benutzerdefinierte Karte herum anpassen.
Wiederholen Sie nun diesen Schritt für jede Karte, die Sie Ihrer Landing Page hinzufügen möchten.
Schritt 5. Veröffentlichen Sie Ihre Google Maps Landing Page
Wenn Sie mit dem Aussehen Ihrer Landing Page zufrieden sind, klicken Sie auf den Abwärtspfeil neben der grünen Schaltfläche Speichern und dann auf Veröffentlichen.
Als Nächstes wird ein Fenster angezeigt, das Ihnen mitteilt, dass Ihre Seite veröffentlicht wurde. Um eine Live-Vorschau zu sehen, klicken Sie auf die Schaltfläche Live-Seite anzeigen .
Methode 2. Manuelles Hinzufügen mehrerer Google Maps auf einer Seite in WordPress
Bei der zweiten Methode in dieser Anleitung wird der Einbettungscode der Google Maps-API kopiert und in einen WordPress-Beitrag oder eine Seite eingefügt, anstatt ein Maps-Plugin zu verwenden.
Der Nachteil dieser Methode ist, dass Sie für jede Karte, die Sie anzeigen möchten, den Einbettungscode finden müssen. Außerdem müssen Sie von Ihrer WordPress-Website zu Google Maps und wieder zurück wechseln.
Außerdem schränkt die direkte Einbettung von Karten in WordPress die Anpassungsmöglichkeiten ein. So haben Sie nicht die erweiterte Layout-Kontrolle, die Sie mit einem WordPress Page Builder wie SeedProd erhalten.
Hier sind die Schritte, um mehrere Google Maps manuell mit dem Einbettungscode einzubetten.
Schritt 1. Finden und teilen Sie Ihren Standort in Google Maps
Gehen Sie zunächst zu Google Maps und geben Sie die erste Adresse ein, die Sie einbetten möchten.
Nachdem Sie Ihren Standort gefunden haben, klicken Sie auf das Symbol Teilen, um die Einstellungen für die Freigabe von Google Maps anzuzeigen.
Klicken Sie nun auf die Registerkarte " Einbetten", wählen Sie eine Kartengröße aus dem Dropdown-Menü und klicken Sie auf den Link "HTML kopieren".
Schritt 2. Den Einbettungscode in WordPress hinzufügen
Gehen Sie dann zu Ihrem WordPress-Dashboard und erstellen Sie eine neue Seite.
Klicken Sie im WordPress-Editor auf das Plus-Symbol (+), um einen neuen WordPress-Block hinzuzufügen, und klicken Sie auf den Block Custom HTML.
Fügen Sie nun den Einbettungscode von Google Maps in den HTML-Block ein. Und wenn Sie auf die Schaltfläche Vorschau klicken, können Sie sehen, wie Ihre Karte aussieht.
Schritt 3. Weitere Google Maps einbetten
Nachdem Sie nun wissen, wie Sie eine Karte hinzufügen können, können Sie weitere hinzufügen, indem Sie die gleichen Schritte ausführen. Wählen Sie einfach eine andere Kartenposition, kopieren Sie den Einbettungscode und fügen Sie ihn in einen neuen HTML-Block auf Ihrer WordPress-Seite ein.
Nachdem Sie alle Maps zur Seite hinzugefügt haben, klicken Sie auf Veröffentlichen. Wenn Sie dann eine Vorschau der Seite anzeigen, sehen Sie jede Map auf einem einzigen Bildschirm eingebettet.
Wie füge ich mehrere Standorte zu einer Karte in WordPress hinzu?
Inzwischen wissen Sie, wie Sie mehrere Google Maps auf einer Seite in WordPress hinzufügen können. Was aber, wenn Sie mehrere Pins auf einer einzigen Karte hinzufügen und in Ihre WordPress-Website einbetten möchten?
Glücklicherweise können Sie dies mit der bereits erwähnten Methode der Karteneinbettung erreichen. Es gibt jedoch noch ein paar weitere Schritte, die wir im Folgenden hervorheben.
Schritt 1. Erstellen Sie eine benutzerdefinierte Google-Karte
Gehen Sie zunächst zu Google Maps, öffnen Sie das Menü und klicken Sie auf den Link "Ihre Orte".
Klicken Sie dort auf die Registerkarte Karten und dann unten auf der Seite auf "Karte erstellen".
Klicken Sie auf die Bezeichnung "Unbenannte Karte" und geben Sie Ihrer Karte einen sinnvollen Namen. Wiederholen Sie diesen Schritt für die Überschrift "Unbenannte Ebene".
Schritt 2. Pinnen Sie Ihre Kartenpositionen
Jetzt können Sie Ihren Standort in die Suchleiste eingeben, um ihn auf der Karte zu suchen. Und wenn Sie ihn gefunden haben, klicken Sie auf den Link + Zur Karte hinzufügen, um an dieser Stelle eine Markierung zu setzen.
Wiederholen Sie diesen Schritt für jeden Ort, den Sie zu Ihrer Karte hinzufügen möchten.
Schritt 3. Teilen Sie Ihre Karte
Um Ihre Karte in WordPress einzubetten, müssen Sie sie zunächst veröffentlichen, da Sie sonst keinen Zugriff auf den Einbettungscode haben. Klicken Sie also einfach auf das Symbol "Teilen".
Schalten Sie nun die folgenden Einstellungen ein:
- Jeder, der über diesen Link verfügt, kann sich
- Lassen Sie andere diese Karte im Internet suchen und finden
Nachdem Sie Ihre Karte freigegeben haben, klicken Sie auf die 3 Punkte in der oberen rechten Ecke und wählen Sie die Option "Auf meiner Website einbetten".
Von dort aus können Sie den benutzerdefinierten Google Maps-Einbettungscode kopieren.
Schritt 4. Einbetten der Karte in WordPress
Der letzte Schritt besteht darin, Ihre Karte mit mehreren Standorten zu einer neuen WordPress-Seite hinzuzufügen. Erstellen Sie also eine neue Seite, wählen Sie den benutzerdefinierten HTML-Block und fügen Sie Ihren Einbettungscode ein.
Wenn Sie jetzt auf Veröffentlichen klicken und Ihre Seite in der Vorschau anzeigen, sehen Sie nur eine Karte mit mehreren benutzerdefinierten Markierungen.
Häufig gestellte Fragen zum Einbinden von Google Maps in WordPress
Brauche ich einen Google Maps-API-Schlüssel, um eine Karte in WordPress einzubetten?
Nein, nicht für die einfache Einbettungsmethode. Wenn Sie in Google Maps die Option „Teilen > Einbetten“ verwenden, funktioniert der Iframe-Code auch ohne API-Schlüssel. Einen API-Schlüssel benötigen Sie nur, wenn Sie ein Karten-Plugin verwenden, das über die Google Maps-API verbunden ist, oder wenn Sie mit der JavaScript-API eine benutzerdefinierte Karte erstellen möchten.
Verlangsamen mehrere Google Maps-Einträge auf einer Seite meine Website?
Jede eingebettete Karte lädt ihren eigenen Iframe, sodass das Hinzufügen mehrerer Karten die Ladezeit der Seite verlängern kann. Ich empfehle, sich auf 3–4 Karten pro Seite zu beschränken. Wenn Sie mehr benötigen, sollten Sie stattdessen eine einzige Karte mit mehreren Markierungen verwenden. Sie können außerdem jedem Iframe das Attribut „loading=“lazy““ hinzufügen, damit die Karten erst geladen werden, wenn der Besucher zu ihnen scrollt.
Kann ich das Erscheinungsbild meiner eingebetteten Google Maps anpassen?
Die Standard-Einbettungsmethode bietet Ihnen nur begrenzte Möglichkeiten. Beim Kopieren des Einbettungscodes können Sie zwischen den Größen „klein“, „mittel“, „groß“ oder einer benutzerdefinierten Größe wählen. Wenn Sie mehr Kontrolle über die Farben der Markierungen, die Infofenster und das Karten-Design wünschen, erstellen Sie zunächst mit Google My Maps eine benutzerdefinierte Karte und betten Sie diese dann ein. Mit dem Google Maps-Block von SeedProd können Sie außerdem den Zoomfaktor, die Ausrichtung und die Rahmen anpassen.
Ist die Nutzung von Google Maps auf WordPress-Websites kostenlos?
Ja, die Einbettung von Google Maps über einen iframe ist völlig kostenlos und unterliegt keinen Nutzungsbeschränkungen. Wenn Sie die Google Maps-API über ein Plugin nutzen, stellt Google Ihnen jeden Monat ein Guthaben von 200 US-Dollar zur Verfügung. Das reicht für etwa 28.000 Kartenaufrufe, was für die meisten Websites kleiner Unternehmen mehr als ausreichend ist.
Jetzt kennen Sie zwei einfache Möglichkeiten, um mehrere Google Maps auf einer Seite in WordPress hinzuzufügen. Wenn Sie volle Kontrolle über Ihr Layout und einen schnelleren Arbeitsablauf wünschen, ist der Drag-and-Drop-Builder von SeedProd die einfachste Option.
Mit SeedProd können Sie mit wenigen Klicks Karten, Kontaktdaten und andere Elemente hinzufügen, die Sie benötigen - ganz ohne Programmierkenntnisse. Legen Sie noch heute los und erstellen Sie in wenigen Minuten eine professionelle Seite.
Vielleicht finden Sie auch die folgenden WordPress-Anleitungen hilfreich:
- Hinzufügen von benutzerdefiniertem CSS in WordPress
- Wie man einen Box Shadow in WordPress hinzufügt
- Hinzufügen einer Galerie zu WordPress-Seiten und -Beiträgen
- Wie man Seitentitel in WordPress ausblendet
- Wie man die Ränder in WordPress ändert
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
