So fügen Sie eine interaktive Karte in WordPress hinzu

Das Hinzufügen einer Karte zu Ihrer WordPress-Website ist wichtig, wenn Sie ein Unternehmen mit einem physischen Standort betreiben oder Inhalte über bestimmte Orte erstellen.

Es mag anfangs kompliziert erscheinen, aber wir haben einige hilfreiche Tools gefunden, die den Prozess erheblich erleichtern. In diesem Artikel zeigen wir Ihnen zwei einfache Methoden, um eine interaktive Karte zu Ihrer WordPress-Website hinzuzufügen.

Wir führen Sie Schritt für Schritt durch den gesamten Prozess, von der Auswahl des richtigen Tools bis zum Einbetten der Karte auf Ihrer Seite.

Wann eine interaktive Karte in WordPress hinzufügen?

Wenn Sie ein physisches Geschäft haben, wie z. B. ein Geschäft oder ein Café, kann eine interaktive Karte potenziellen Besuchern helfen, Ihren Standort zu finden. Dies kann Ihnen mehr Kunden, Verkäufe und sogar persönliche Termine und Buchungen bringen.

Es kann auch die Benutzererfahrung verbessern, da Besucher ihre Reise planen können, ohne eine separate Karten-App oder Website nutzen zu müssen.

Je nach Website kann eine interaktive Karte sogar nützliche Inhalte liefern. Wenn Sie beispielsweise einen Fitness-Blog haben, können Sie Ihren Lesern empfohlene Laufstrecken oder Wanderungen anzeigen.

Ähnlich, wenn Sie einen Familienblog haben, könnten Sie alle kinderfreundlichen Attraktionen hervorheben, zu denen Ihre Zielgruppe ihre Familien mitnehmen kann.

Mit diesen Worten sehen wir uns zwei anfängerfreundliche Möglichkeiten an, eine interaktive Karte in WordPress hinzuzufügen. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1. Hinzufügen einer interaktiven Weltkarte mit einem Page Builder (benutzerdefinierte Seiten mit Karten)
• Methode 2. Interaktive benutzerdefinierte Karten kostenlos mit Google My Maps erstellen

Methode 1. Eine interaktive Weltkarte mit einem Page Builder hinzufügen (Benutzerdefinierte Seiten mit Karten)

Der einfachste Weg, eine einfache interaktive Karte in WordPress hinzuzufügen, ist die Verwendung von Google Maps und dem SeedProd-Plugin.

Dieses fortschrittliche Page Builder-Plugin ermöglicht es Ihnen, professionell gestaltete Seiten zu erstellen, ohne eine einzige Zeile Code schreiben zu müssen.

Es enthält auch einen fertigen Google Maps-Block, den Sie einfach per Drag & Drop auf Ihr Layout ziehen können. Besucher können mit Ihrer Karte über die Zoom-Schaltflächen interagieren oder sie verschieben, um andere Bereiche zu erkunden.

SeedProd macht es einfach, eigenständige Seiten mit einem einzigartigen Design zu gestalten. Daher ist es auch eine großartige Wahl, wenn Sie eine interaktive Karte zu einer benutzerdefinierten Homepage oder Landingpage hinzufügen möchten.

Das erste, was Sie tun müssen, ist, SeedProd zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie einen Lizenzschlüssel eingeben.

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website. Nachdem Sie den Lizenzschlüssel hinzugefügt haben, klicken Sie auf „Schlüssel überprüfen“.

Wenn Sie fertig sind, gehen Sie zu SeedProd » Landing Pages und klicken Sie auf „Neue Landing Page hinzufügen“.

SeedProd zeigt nun alle Vorlagen an, die Sie zum Erstellen schöner Landingpages, Verkaufseiten und mehr verwenden können. Um Ihnen zu helfen, die richtige Vorlage für Ihre Website zu finden, sind die Vorlagen von SeedProd in Kategorien wie Wartungsmodus, bald verfügbar, Webinar und mehr unterteilt.

Um ein Design genauer zu betrachten, fahren Sie einfach mit der Maus über diese Vorlage. Klicken Sie dann auf das Lupensymbol.

Dies öffnet die Vorlage in einem neuen Tab.

Wenn Sie ein Design gefunden haben, das Sie auf Ihrer WordPress-Website verwenden möchten, klicken Sie einfach auf „Diese Vorlage auswählen“.

Sie können jetzt einen Namen für Ihre Landingpage in das Feld „Seitenname“ eingeben. Dies dient nur Ihrer Information, sodass Sie alles verwenden können, was Sie möchten.

SeedProd erstellt automatisch eine „Seiten-URL“ anhand des Seitennamens, aber Sie können diese automatisch generierte URL ändern.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf „Speichern und Seite bearbeiten“. Dadurch wird die SeedProd-Seiten-Builder-Oberfläche geladen.

Dieser einfache Drag-and-Drop-Builder zeigt eine Live-Vorschau der Seite auf der rechten Seite. Links befindet sich ein Menü, das die verschiedenen Blöcke und Abschnitte anzeigt, die Sie zu Ihrem WordPress-Blog oder Ihrer Website hinzufügen können.

SeedProd bietet über 90 vorgefertigte Blöcke, mit denen Sie schnell ein schönes Seitenlayout erstellen können. Dazu gehören erweiterte Blöcke wie Countdown-Timer und Einbettungen wie ein Audioplayer von SoundCloud oder Videos von TikTok.

Sie können auch SeedProd-Blöcke wie Abstände, Spalten und Trennlinien verwenden, um die Seite zu strukturieren. Dies kann Besuchern helfen, sich auf der Seite zurechtzufinden und die gesuchten Informationen zu finden.

Wenn Sie einen Block finden, den Sie dem Seitenlayout hinzufügen möchten, ziehen Sie ihn einfach per Drag & Drop auf die Vorlage. Während Sie Ihre Landingpage erstellen, können Sie diese Blöcke durch Ziehen und Ablegen in Ihrem Layout verschieben.

Um eine interaktive Karte hinzuzufügen, suchen Sie einfach den Google Maps-Block im linken Menü und ziehen Sie ihn auf Ihr Layout.

Der Google Maps-Block zeigt einen Standardstandort an, aber Sie möchten diesen normalerweise ändern.

Klicken Sie einfach, um den Google Maps-Block auszuwählen, und klicken Sie dann auf das kleine Zahnradsymbol, das in der Symbolleiste erscheint.

Dies öffnet die Einstellungen des Blocks im Menü auf der linken Seite.

Geben Sie hier eine andere Adresse in das Feld „Standort“ ein.

Der Block wird nun aktualisiert, um diese Adresse anzuzeigen.

Besucher können diesen Standort manuell vergrößern und verkleinern, indem sie die Schaltflächen „+“ und „-“ in der rechten Ecke der Karte verwenden. Sie können die Standardzoomstufe jedoch ändern, indem Sie den Schieberegler „Zoom“ ziehen oder eine genaue Zahl in das Textfeld eingeben.

Danach möchten Sie möglicherweise den Block mit den Schiebereglern 'Breite' und 'Höhe' in der Größe ändern. Die 'Höhe' wird in Pixeln angezeigt, aber die 'Breite' ist der gesamte verfügbare Prozentsatz. Zum Beispiel bedeutet '100', dass der Google Maps-Block 100 % der verfügbaren Breite einnimmt.

Um einen dieser Werte zu ändern, ziehen Sie einfach die Schieberegler oder geben Sie eine Zahl in das Textfeld ein. Während Sie Änderungen vornehmen, wird der Google Maps-Block automatisch aktualisiert, sodass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was am besten aussieht.

Wenn Sie die Breite auf weniger als 100 einstellen, möchten Sie möglicherweise die Ausrichtung des Blocks ändern. Sie könnten beispielsweise die interaktive Karte in der Mitte der Seite anzeigen.

Um diese Änderung vorzunehmen, klicken Sie einfach auf die verschiedenen Schaltflächen im Abschnitt „Ausrichtung“.

Sie können nun mit der Gestaltung fortfahren, indem Sie neue Blöcke auf das Seitenlayout ziehen und dann Änderungen im linken Menü vornehmen. Weitere Informationen finden Sie in unserem Leitfaden zur Erstellung einer Landingpage in WordPress.

Wenn Sie mit dem Aufbau der Seite zufrieden sind, klicken Sie auf den Pfeil neben der Schaltfläche „Speichern“ und wählen Sie dann „Veröffentlichen“.

Wenn Sie nun Ihre Website besuchen, sehen Sie die interaktive Karte in Aktion.

Methode 2. Interaktive benutzerdefinierte Karten kostenlos mit Google My Maps erstellen

Wenn Sie eine Google Map mit grundlegenden Interaktionen hinzufügen möchten, ist SeedProd eine ausgezeichnete Wahl.

Wenn Sie jedoch fortgeschrittenere Interaktionen bereitstellen müssen, empfehlen wir stattdessen die Verwendung von Google My Maps.

Dieser kostenlose Online-Dienst ermöglicht es Ihnen, eine Google Map mit einzigartigen Markern, Points of Interest, Wegbeschreibungen und mehr anzupassen. Sie können sie dann mit Code zu Ihrer Website hinzufügen, sodass Sie kein separates WordPress-Plugin installieren müssen.

Schritt 1: Erstellen Sie eine interaktive Karte mit Google My Maps

Zuerst müssen Sie die Website Google My Maps besuchen und auf „Neue Karte erstellen“ klicken.

Sie sehen nun den Karten-Editor.

Hier können Sie eine Basiskarte auswählen und Points of Interest, Ebenen und mehr hinzufügen.

Um Ihre Arbeit organisiert zu halten, ist es eine gute Idee, der Ebene einen Namen zu geben.

Klicken Sie dazu auf die drei Punkte neben „Unbenannte Ebene“ und wählen Sie dann „Diese Ebene umbenennen“.

Sie können jetzt den gewünschten Namen eingeben. Dies dient nur Ihrer Referenz, sodass Sie alles verwenden können, was Sie möchten.

Wenn Sie damit fertig sind, klicken Sie auf „Speichern“.

Als Nächstes können Sie das Aussehen der Karte ändern, indem Sie einen der vorgefertigten Stile auswählen. Um die verfügbaren Optionen anzuzeigen, klicken Sie auf den Pfeil neben „Basiskarte“.

Sie können dann auf eine der Miniaturansichten klicken, um diesen Stil auf die Karte anzuwenden.

Schritt 2: Fügen Sie interessante Punkte zur interaktiven Karte hinzu

Wenn Sie nur eine einfache Karte erstellen möchten, können Sie zu Schritt 4 springen. Möglicherweise möchten Sie die Karte jedoch anpassen, indem Sie interessante Punkte hinzufügen.

Wenn ein Besucher auf einen dieser Punkte klickt, öffnet sich ein Tooltip mit dem Namen des Ortes sowie einer Beschreibung, Fotos und Videos, falls verfügbar.

Es gibt verschiedene Möglichkeiten, anklickbare Points of Interest hinzuzufügen, aber am einfachsten ist es, die Adresse in die Suchleiste einzugeben und dann auf das Symbol „Suchen“ zu klicken.

Google My Maps zoomt nun in den Bereich.

Manchmal ist der Ort bereits als Point of Interest hinzugefügt, insbesondere wenn es sich um eine große Touristenattraktion oder ein berühmtes Gebäude handelt. In diesem Fall können Sie einfach auf den Ort klicken und dann „Zur Karte hinzufügen“ auswählen.

Wenn der Interessenspunkt bereits existiert, zeigt Google My Maps automatisch einige Informationen zu diesem Ort in einem Popup an. Möglicherweise möchten Sie diese Standardinformationen jedoch anpassen oder eigene Fotos und Videos hinzufügen.

Klicken Sie dazu auf das Symbol „Bearbeiten“, das wie ein kleiner Bleistift aussieht.

Sie können jetzt den Titel und die Beschreibung eingeben, die jedem angezeigt werden sollen, der auf diesen Ort von Interesse klickt.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf „Speichern“.

Eine weitere Option ist das Hinzufügen eigener Bilder und Videos zum Popup.

Wenn Sie beispielsweise eine interaktive Karte für Ihre Restaurant-Website erstellen, können Sie Fotos des Äußeren des Lokals hinzufügen, damit Kunden es leichter finden.

Sie könnten dieses Popup sogar nutzen, um mehr Kunden zu gewinnen. Wenn Sie beispielsweise Ihr Fotostudio als Interessenspunkt hinzufügen, könnten Sie Ihr Fotografie-Portfolio hochladen.

Um Medien hinzuzufügen, klicken Sie einfach auf das kleine Kamerasymbol.

Sie können jetzt im erscheinenden Popup ein Bild oder Video auswählen.

Klicken Sie nach Ihrer Auswahl auf „Einfügen“.

Wenn Sie fertig sind, vergessen Sie nicht, auf „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Manchmal möchten Sie vielleicht einen Ort anzeigen, der noch nicht bei Google Maps eingetragen ist. Das kann Ihr eigenes Büro, ein Geschäft, eine brandneue Touristenattraktion oder der Treffpunkt für Ihre Veranstaltung oder Konferenz sein.

Um einen Marker hinzuzufügen, klicken Sie auf das Symbol „Marker hinzufügen“ unter der Suchleiste.

Sie können jetzt auf die genaue Stelle klicken, an der Sie eine Markierung erstellen möchten.

Dies öffnet ein leeres Popup, in das Sie einen Titel und eine Beschreibung eingeben können. Sie können auch Bilder und Videos hinzufügen, indem Sie auf das kleine Kamera-Symbol klicken.

Wenn Sie mit der Einrichtung des Popups zufrieden sind, klicken Sie auf die Schaltfläche 'Speichern'.

Um weitere interessante Punkte hinzuzufügen, folgen Sie einfach dem gleichen Prozess wie oben beschrieben.

Schritt 3: Reisehinweise zu einer interaktiven Karte hinzufügen

Möglicherweise möchten Sie auch einige Wegbeschreibungen hinzufügen, die als blaue Linie auf der Karte angezeigt werden.

Diese Kartenfunktion kann nützlich sein, wenn Sie möchten, dass Besucher Ihre Veranstaltung oder einen Veranstaltungsort wie Ihre Bar oder Kneipe finden. Wenn Sie einen Reiseblog betreiben, können Sie Ihren Lesern sogar einige Sightseeing-Routen empfehlen.

Es gibt verschiedene Möglichkeiten, Wegbeschreibungen hinzuzufügen, aber die einfachste Methode ist, unter der Suchleiste auf das Symbol „Wegbeschreibungen hinzufügen“ zu klicken.

Dies fügt einen neuen Bereich auf der linken Seite des Bildschirms hinzu, in den Sie die Start- und Endadressen eingeben können, die Sie verwenden möchten.

Standardmäßig zeigt Google Maps die Wegbeschreibung für Autofahrer an, Sie können jedoch stattdessen auf Fußgänger- oder Radfahreranweisungen umschalten. Klicken Sie einfach auf den Text, der standardmäßig „Fahren“ anzeigt, und wählen Sie dann das Symbol für Radfahren oder Gehen aus.

Eine weitere Option ist das Zeichnen einer Linie auf der Karte. Dies ist nützlich, wenn Sie eine ganz bestimmte Route zwischen zwei oder mehr Orten anzeigen möchten und nicht die schnellste Route.

Klicken Sie dazu auf das Symbol "Linie zeichnen" unter der Suchleiste. Sie können nun wählen, ob Sie eine Fahr-, Geh- oder Radroute hinzufügen möchten.

Klicken Sie danach auf den Startpunkt und ziehen Sie eine Linie, indem Sie Ihre Maus entlang der gewünschten Route bewegen.

Wenn Sie am Ziel angekommen sind, klicken Sie einfach, um an dieser Stelle eine Markierung zu setzen. An diesem Punkt können Sie mit dem Zeichnen aufhören oder die Maus weiter bewegen, um weitere Markierungen zur Route hinzuzufügen.

Schritt 4: Veröffentlichen Sie die interaktive Karte in WordPress

Wenn Sie mit der Einrichtung der Karte zufrieden sind, können Sie sie mit einem iFrame-Einbettungscode auf Ihrer Website einfügen.

Zuerst müssen Sie die Karte öffentlich machen, indem Sie auf die Schaltfläche „Teilen“ klicken. Daraufhin öffnet sich ein Popup, in das Sie einen Kartentitel und eine optionale Beschreibung eingeben können.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf „OK“.

Als Nächstes möchten Sie den Schalter „Jeder mit diesem Link kann anzeigen“ aktivieren. Die anderen Einstellungen sind optional, sodass Sie entscheiden können, ob Sie zulassen möchten, dass Personen nach der Karte suchen, oder ob Ihr Name und Ihr Profilbild angezeigt werden sollen.

Wenn Sie mit der Konfiguration zufrieden sind, klicken Sie auf „Auf Drive teilen“.

Öffnen Sie im nächsten Popup das Dropdown-Menü unter „Allgemeiner Zugriff“ und wählen Sie „Jeder mit dem Link“.

Da wir nicht möchten, dass andere Personen die Karte bearbeiten, klicken Sie auf das Dropdown-Menü „Viewer/Editor“ und wählen Sie „Viewer“. Klicken Sie abschließend auf „Fertig“.

Klicken Sie danach im linken Menü auf das Symbol mit den drei Punkten.

Wählen Sie dann „Auf meiner Website einbetten“.

Google Maps zeigt nun einen Einbettungscode an, mit dem Sie die Karte in Ihren Online-Shop, Blog oder Ihre Website einfügen können.

Sie können diesen iframe-Code kopieren.

Sie sind nun bereit, den Code auf Ihrer Website einzufügen. Gehen Sie in Ihrem WordPress-Dashboard zu dem Beitrag oder der Seite, auf der Sie eine interaktive Karte hinzufügen möchten, und öffnen Sie den Gutenberg-Editor.

Klicken Sie dann auf die Schaltfläche „+“ und beginnen Sie mit der Eingabe von „HTML“, um den benutzerdefinierten HTML-Block zu finden. Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zur Beitrag oder Seite hinzuzufügen.

Sie können nun den Google Maps-Code in den Block Benutzerdefiniertes HTML einfügen.

Wenn Sie bereit sind, live zu gehen, klicken Sie entweder auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“.

Wenn Sie nun Ihre Website besuchen, sehen Sie die interaktive Karte live.

Möchten Sie mehr über das Hinzufügen von Karten zu WordPress erfahren? Sehen Sie sich die folgenden Artikel an:

• So fügen Sie Google Maps in WordPress hinzu (Der RICHTIGE Weg)
• Die besten Google Maps Plugins für WordPress (die meisten sind kostenlos)
• So betten Sie eine Google Map in Kontaktformulare ein (mit Karten-Pin)
• So fügen Sie einen Google Maps-Shop-Locator in WordPress hinzu
• So betten Sie Bing Maps in WordPress ein (Schritt für Schritt)

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie eine interaktive Karte in WordPress hinzufügen. Vielleicht möchten Sie auch lernen, wie Sie Google Web Stories zu Ihrer WordPress-Site hinzufügen oder unseren ultimativen Leitfaden zum Einbetten von PDFs, Tabellenkalkulationen und mehr in WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.