Mehrere Google Maps auf einer Seite in WordPress hinzuzufügen, ist eine der einfachsten Möglichkeiten, Besuchern alle Ihre Standorte anzuzeigen, ohne sie auf separate Seiten zu leiten.
Ich bin selbst auf dieses Problem gestoßen, als ich verschiedene Standorte für ein lokales Unternehmen verwaltet habe. Jeder Ort benötigte seine eigene Karte, und ich wollte nicht, dass die Leute nur zum Navigieren klicken.
In diesem Leitfaden führe ich Sie durch zwei anfängerfreundliche Methoden, um dies zu erreichen. Eine verwendet einen Page Builder mit einem Drag-and-Drop-Google-Maps-Block. Die andere verwendet direkt den kostenlosen Einbettungscode von Google Maps.
Was Sie benötigen: Eine WordPress-Website mit Admin-Zugang und ein kostenloses Google-Konto. Wenn Sie die Drag-and-Drop-Methode verwenden möchten, benötigen Sie außerdem SeedProd Pro.
Methode 1. Mehrere Google Maps mit SeedProd auf einer Seite hinzufügen
Die erste Methode in diesem Tutorial zeigt Ihnen, wie Sie mehrere Google Maps auf einer Landingpage in WordPress hinzufügen.
Landingpages sind der beste Weg, um gezielten Traffic in Leads und Verkäufe umzuwandeln. Wenn Sie also eine Veranstaltung oder Rabatte in lokalen Geschäften bewerben, ist eine Landingpage mit mehreren Karten der ideale Weg, um Leute ins Geschäft zu locken.
Und das beste WordPress-Landingpage-Plugin für diese Aufgabe ist SeedProd.
SeedProd ist ein visueller WordPress-Landingpage-Builder und Website-Builder, mit dem Sie hochkonvertierende Seiten erstellen können, ohne Code schreiben zu müssen. 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 zum Hinzufügen benutzerfreundlicher Inhalte zu Ihrer Seite, darunter:
- Google Maps
- Call-to-Action-Buttons
- Preistabellen
- Bildkarussells
- Referenzen
- Dynamischer Text
- Animierte Schlagzeilen
- Opt-in-Formulare
- Und mehr
Das bedeutet, dass Sie jede Seite schnell erstellen können, ohne einen Entwickler einstellen zu müssen.
Befolgen Sie die nachstehenden Schritte, um zu erfahren, wie Sie mit SeedProd Google Maps auf einer Seite in WordPress hinzufügen.
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, verwenden wir für dieses Tutorial SeedProd Pro. 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 zum Installieren von WordPress-Plugins.
Sobald Sie SeedProd installiert haben, sehen Sie einen Begrüßungsbildschirm, auf dem Sie nach Ihrem Lizenzschlüssel gefragt werden. Geben Sie Ihren Schlüssel ein und klicken Sie auf die Schaltfläche Lizenzschlüssel überprüfen, um Ihre Lizenz zu aktivieren.
Hinweis: Sie finden Ihren Schlüssel, indem Sie sich in Ihr SeedProd-Konto einloggen und auf den Link Lizenzschlüssel, Details und Downloads anzeigen klicken.
Schritt 2. Neue Landingpage erstellen
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 gelangen Sie zum Landingpage-Dashboard von SeedProd.
Auf dieser Seite gibt es mehrere Landingpage-Modi, darunter:
- Wartungsmodus (Coming Soon)
- Wartungsmodus
- Anmelden
- 404
Und mit diesen Seitenmodi können Sie mit einem einzigen Klick verschiedene Landingpages aktivieren. Sie können beispielsweise den Wartungsmodus aktivieren, wenn Sie kleinere Updates durchführen.
Klicken Sie im Abschnitt „Seitenmodi“ auf die Schaltfläche Neue Landingpage erstellen, um Ihre erste Seite zu erstellen.
Auf dem nächsten Bildschirm können Sie aus Hunderten von vorgefertigten Landingpage-Vorlagen wählen. Klicken Sie einfach auf eine Vorlage, um sie als Ausgangspunkt zu verwenden.
Nachdem Sie eine Vorlage ausgewählt haben, öffnet sich ein Popup-Fenster, in dem Sie aufgefordert werden, Ihrer Seite einen Namen zu geben und die URL einzugeben.
Klicken Sie anschließend auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen, um Ihre Vorlage zu starten.
Schritt 3. Passen Sie Ihre Landing Page an
Wenn Sie Ihr Design starten, wird es im Seitenersteller von SeedProd geöffnet. Der Editor verfügt über ein benutzerfreundliches 2-Panel-Design, das die Anpassung Ihrer Seite erleichtert:
- Linkes Panel: Blöcke und Abschnitte zum Erstellen und Anpassen Ihrer Seite
- Rechtes Panel: Live-Vorschau Ihrer Landingpage in Echtzeit
Oben im Editor befindet sich ein Navigationsmenü, um schnell zwischen Design, Integrationen und Einstellungen zu wechseln.
Und am unteren Rand des linken Panels befinden sich mehrere weitere Symbole zum Rückgängigmachen und Wiederherstellen von Änderungen, zum Umschalten auf die mobile Vorschau und mehr.
Diese Einstellungen erleichtern die Anpassung Ihres Designs, um Ihre Landingpage-Ziele zu erreichen. Wenn Sie beispielsweise auf eine Seitenüberschrift klicken, können Sie den Inhalt und die Farbe ändern und die Änderungen in Echtzeit sehen.
Oder um die Standardvorlagenbilder zu ersetzen, können Sie auf ein beliebiges Bild klicken und es durch eines von Ihrem Computer, Ihrer Mediathek oder ein kostenloses Stockfoto ersetzen.
Passen Sie Ihr Design weiter an, bis Sie mit dem Aussehen zufrieden sind. Und vergessen Sie nicht, oben rechts auf die Schaltfläche Speichern zu klicken.
Schritt 4. Mehrere Google Maps zu Ihrer Landingpage hinzufügen
Das Hinzufügen mehrerer Google Maps zu Ihrer Landingpage ist mit dem integrierten Google Maps-Block von SeedProd ganz einfach.
Fügen wir zunächst einige Spalten hinzu, um jede Karte unterzubringen. Klicken Sie im linken Panel auf den Spalten-Block und ziehen Sie ihn in einen Abschnitt Ihrer Seite.
Wählen Sie nun aus, wie viele Spalten angezeigt werden sollen. Für diese Anleitung haben wir das 3-Spalten-Layout gewählt.
Jetzt sind Sie bereit, Google Maps zu jeder Spalte hinzuzufügen.
Klicken Sie dazu auf den Google Maps-Block und ziehen Sie ihn in die erste Spalte.
Wenn Sie auf die Blockeinstellungen klicken, öffnet sich ein Panel, in das Sie Ihren gewählten Standort eingeben können. Sie können dann den Zoom der Karte auswählen, die Ausrichtung ändern und die Breite anpassen.
Zusätzlich können Sie im Tab Erweitert verschiedene Rahmenstile auswählen und den Abstand um Ihre benutzerdefinierte Karte anpassen.
Wiederholen Sie diesen Schritt nun für jede Karte, die Sie zu Ihrer Landingpage hinzufügen möchten.
Schritt 5. Veröffentlichen Sie Ihre Google Maps Landingpage
Wenn Sie mit dem Aussehen Ihrer Landingpage zufrieden sind, 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.
Methode 2. Manuelles Hinzufügen mehrerer Google Maps auf einer Seite in WordPress
Die zweite Methode in diesem Leitfaden beinhaltet das Kopieren und Einfügen des Google Maps API-Einbettungscodes in einen WordPress-Beitrag oder eine Seite, anstatt ein Karten-Plugin zu verwenden.
Der Nachteil dieser Methode ist, dass Sie den Einbettungscode für jede Karte finden müssen, die Sie anzeigen möchten. Außerdem müssen Sie zwischen Ihrer WordPress-Site und Google Maps wechseln.
Darüber hinaus schränkt das direkte Einbetten von Karten in WordPress die Anpassungsoptionen ein. Sie haben also nicht die erweiterte Layoutkontrolle, 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 Ihres Standorts in Google Maps
Gehen Sie zuerst 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 Google Maps-Freigabeeinstellungen 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. Fügen Sie den Einbettungscode in WordPress ein
Gehen Sie als Nächstes zu Ihrem WordPress-Dashboard und erstellen Sie eine neue Seite.
Klicken Sie im WordPress-Editor auf das Pluszeichen (+), um einen neuen WordPress-Block hinzuzufügen, und klicken Sie auf den Block Benutzerdefiniertes 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. Betten Sie weitere Google Maps ein
Nachdem Sie nun wissen, wie Sie eine Karte hinzufügen, fügen Sie weitere hinzu, indem Sie die gleichen Schritte befolgen. Wählen Sie einfach einen anderen Kartenstandort aus, kopieren Sie den Einbettungscode und fügen Sie ihn in einen neuen HTML-Block auf Ihrer WordPress-Seite ein.
Nachdem Sie alle Ihre Karten zur Seite hinzugefügt haben, klicken Sie auf Veröffentlichen. Wenn Sie die Seite dann in der Vorschau anzeigen, sehen Sie jede Karte auf einem einzigen Bildschirm eingebettet.
Wie füge ich mehrere Standorte zu einer Karte in WordPress hinzu?
Bis jetzt wissen Sie, wie Sie mehrere Google Maps auf einer Seite in WordPress hinzufügen. Aber was ist, wenn Sie mehrere Markierungen auf einer einzigen Karte hinzufügen und diese auf Ihrer WordPress-Site einbetten möchten?
Glücklicherweise können Sie dies mit der zuvor erwähnten Karten-Einbettungsmethode tun. Es gibt jedoch noch ein paar weitere Schritte, die wir unten hervorheben.
Schritt 1. Erstellen Sie eine benutzerdefinierte Google Map
Gehen Sie zuerst zu Google Maps, öffnen Sie das Menü und klicken Sie auf den Link „Ihre Orte“.
Klicken Sie von 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. Markieren Sie Ihre Kartenstandorte
Sie können nun Ihren Standort in die Suchleiste eingeben, um ihn auf der Karte zu suchen. Und sobald Sie ihn gefunden haben, klicken Sie auf den Link + Zur Karte hinzufügen, um eine Markierung an dieser Stelle zu platzieren.
Wiederholen Sie diesen Schritt für jeden Standort, den Sie Ihrer Karte hinzufügen möchten.
Schritt 3. Teilen Sie Ihre Karte
Um Ihre Karte in WordPress einzubetten, müssen Sie sie zuerst öffentlich machen; andernfalls können Sie nicht auf den Einbettungscode zugreifen. Klicken Sie also auf das Symbol „Teilen“.
Schalten Sie nun die folgenden Einstellungen auf Ein:
- Jeder mit diesem Link kann anzeigen
- Lassen Sie andere diese Karte im Internet suchen und finden
Nachdem Sie Ihre Karte geteilt haben, klicken Sie auf die 3 Punkte in der oberen rechten Ecke und wählen Sie die Option „Auf meiner Website einbetten“.
Von dort können Sie den benutzerdefinierten Google Maps-Einbettungscode kopieren.
Schritt 4. Betten Sie Ihre Karte in WordPress ein
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 nun auf Veröffentlichen klicken und Ihre Seite in der Vorschau anzeigen, sehen Sie nur 1 Karte mit mehreren benutzerdefinierten Markierungen.
FAQs zum Hinzufügen von Google Maps in WordPress
Benötige ich einen Google Maps API-Schlüssel, um eine Karte in WordPress einzubetten?
Nein, nicht für die grundlegende Einbettungsmethode. Wenn Sie die Option Teilen > Einbetten in Google Maps verwenden, funktioniert der iframe-Code ohne API-Schlüssel. Sie benötigen nur dann einen API-Schlüssel, wenn Sie ein Karten-Plugin verwenden, das sich über die Google Maps API verbindet, oder wenn Sie eine benutzerdefinierte Karte mit der JavaScript-API erstellen möchten.
Verlangsamen mehrere Google Maps auf einer Seite meine Website?
Jede eingebettete Karte lädt ihren eigenen iframe, sodass das Hinzufügen mehrerer Karten die Ladezeit der Seite erhöhen kann. Ich empfehle, es bei 3-4 Karten pro Seite zu belassen. Wenn Sie mehr benötigen, sollten Sie stattdessen eine einzelne Karte mit mehreren Pins verwenden. Sie können auch loading="lazy" zu jedem iframe hinzufügen, damit Karten nur geladen werden, wenn der Besucher zu ihnen scrollt.
Kann ich das Aussehen meiner eingebetteten Google Maps anpassen?
Die grundlegende Einbettungsmethode bietet nur begrenzte Optionen. Sie können kleine, mittlere, große oder benutzerdefinierte Größen auswählen, wenn Sie den Einbettungscode kopieren. Für mehr Kontrolle über Pin-Farben, Infofenster und Kartenstile verwenden Sie Google My Maps, um zuerst eine benutzerdefinierte Karte zu erstellen und diese dann einzubetten. SeedProds Google Maps-Block ermöglicht es Ihnen auch, Zoom, Ausrichtung und Rahmen anzupassen.
Ist Google Maps auf WordPress-Websites kostenlos nutzbar?
Ja, das Einbetten von Google Maps mit einem iframe ist völlig kostenlos und ohne Nutzungslimits. Wenn Sie die Google Maps API über ein Plugin verwenden, erhalten Sie von Google jeden Monat 200 US-Dollar an kostenlosen Guthaben. Das reicht für etwa 28.000 Kartenaufrufe, was für die meisten kleinen Unternehmenswebsites mehr als genug ist.
Jetzt kennen Sie zwei einfache Möglichkeiten, mehrere Google Maps auf einer Seite in WordPress hinzuzufügen. Wenn Sie die volle Kontrolle über Ihr Layout und einen schnelleren Workflow wünschen, ist SeedProds Drag-and-Drop-Builder die einfachste Option.
Mit SeedProd können Sie Karten, Kontaktdaten und alle anderen benötigten Elemente mit nur wenigen Klicks hinzufügen – ganz ohne Code. Starten Sie noch heute und erstellen Sie in wenigen Minuten eine professionelle Seite.
Möglicherweise finden Sie auch die folgenden WordPress-Anleitungen hilfreich:
- So fügen Sie benutzerdefiniertes CSS in WordPress hinzu
- So fügen Sie einen Schatteneffekt (Box Shadow) in WordPress hinzu
- So fügen Sie eine Galerie zu WordPress-Seiten und -Beiträgen hinzu
- So blenden Sie Seitentitel in WordPress aus
- So ändern Sie Ränder in WordPress
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
