Springe zum Hauptinhalt

So fügen Sie Ihrer WordPress-Website interaktive Karten hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wenn Sie einen Dienst wie Google MapsWählen Sie einfach einen Ort und binden Sie die Karte in Ihre Website ein. Sie können jedoch keine Karten im laufenden Betrieb bearbeiten und Ihre Mitarbeiter auch nicht - was häufig für gemeinsame Projekte erforderlich ist.

Hier kommen interaktive Karten ins Spiel. Mit ihnen können Sie bewegliche Markierungen platzieren, die jeder in Ihrem Team bearbeiten kann. 

In diesem Tutorial werden wir darüber sprechen, wann diese Art von Karte nützlich ist. Außerdem zeigen wir Ihnen, wie Sie sie auf zwei Arten zu WordPress hinzufügen können.

Aber bevor Sie anfangen, nehmen Sie sich die Zeit, um einen Blick darauf zu werfen Wie man ein Wordpress-Theme zu installierenWie viele Plugins sollte ich installieren auf Wordpress.

Dann mLass uns an die Arbeit gehen!

Was ist eine interaktive Karte (und wann wird sie verwendet?)

Das Hinzufügen einer Karte zu einer Website ist ziemlich einfach. Werkzeuge wie Mit Google Maps können Sie Karten in wenigen Minuten in Ihre Seiten einbetten. Der Vorteil dieses Ansatzes besteht darin, dass Besucher sich auf den Karten bewegen, vergrößern, verkleinern usw. können.

Diese Kartentypen sind interaktiver als nur Bilder. Sie können jedoch keine Änderungen vornehmen, sobald Sie sie Ihrer Website hinzugefügt haben.

Auf der anderen Seite können Sie (und in einigen Fällen auch Ihre Kollegen) mithilfe interaktiver Karten neue Markierungen, Symbole, Texte und mehr hinzufügen. Stellen Sie sich zum Beispiel vor, Sie planen ein Meeting für Mitglieder Ihrer Website. Sie können eine Karte mit mehreren Stecknadeln konfigurieren, um Standorte vorzuschlagen.

Übrigens entdecken 5-WordPress-Plugins zum Hinzufügen von Geolocation zu Ihrem Blog

Sie können auch eine interaktive Karte verwenden, damit Ihre Benutzer ihre Standorte freigeben oder zu Orten navigieren können, die sie besuchen möchten. Genauer gesagt handelt es sich hierbei um Nischenanwendungen. Allerdings sind die interaktiven Karten  peuvent  nützlich sein in einer Vielzahl von Situationen. 

Darüber hinaus sind sie nicht unbedingt schwieriger hinzuzufügen als ihre Gegenstücke.

So fügen Sie Ihrer WordPress-Website interaktive Karten hinzu

Wenn es um interaktive Karten geht, können Sie entweder eine in Ihre Website einbetten oder ein Plugin verwenden, um dies zu tun. Der erste Ansatz ist einfacher, aber Plugins bieten häufig viel mehr Funktionen, als Sie vielleicht erwarten. Lassen Sie uns den Ansatz des Plugins durchgehen, um zu zeigen, was diese Funktionen sind.

1. Verwenden Sie das Plugin Karten Marker Pro

Verwenden Sie Map Maker Pro

Das Plugin Karten Marker Pro ist eine One-Stop-Premium-Lösung zum Hinzufügen von Karten zu WordPress. Es bietet Dutzende erweiterter Funktionen, mit denen Sie Karten aus mehreren Abteilungen anzeigen und Ihren Karten eine praktisch unbegrenzte Anzahl von Markierungen hinzufügen und organisieren können. Darüber hinaus können Besucher die Arten von Markierungen filtern, die sie auf Ihren Karten sehen möchten.

Andere lustige Dinge, die Sie mit diesem Plugin tun können, sind das Hinzufügen von Entfernungs- und Routeninformationen zwischen Markierungen. Sie können sogar Ihren eigenen Standort in Echtzeit über Ihre Website-Karte teilen, wenn Sie dazu bereit sind. Das Einrichten des Plugins kann aufgrund der Vielzahl der angebotenen Funktionen einige Zeit in Anspruch nehmen. 

Es ist jedoch nicht so schwierig, wie Sie sich vorstellen können. 

Konfigurieren und aktivieren Sie das Plugin zunächst wie jedes andere. Wenn Sie WordPress noch nicht kennen, finden Sie es heraus Wie ein Plugin in Wordpress zu installieren

Sobald das Plugin fertig ist, müssen Sie eine neue Karte oder einen neuen Layer hinzufügen, was Sie über die Registerkarte tun können Maps Marker Pro> Neue Ebene hinzufügen. Legen Sie hier einen Namen fest, den Sie für Ihre Ebene erkennen können, und geben Sie den Ort ein, an dem er angezeigt werden soll, genau wie bei jedem anderen Online-Mapping-Tool:

Füge eine neue Ebene hinzu

Jetzt können Sie die Größe und Zoomstufe, die Sie als Standard festlegen möchten, über das linke Menü anpassen. Es gibt auch eine Option namens Marker-Clustering Wenn Sie zu weit hineinzoomen, wird ein Symbol mit der Anzahl der Markierungen in einem Bereich angezeigt, wie im folgenden Beispiel:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Zeigen Sie eine Markierung an

die Option Suchmarkierungenist andererseits ziemlich explizit. Dies kann hilfreich sein, wenn Sie zusätzliche Informationen zu Ihren Markern hinzufügen möchten:

Liste der Marker

Scrollen Sie nun nach unten und finden Sie die Option « Füge einen neuen Marker auf dieser Ebene hinzu« . Auf dem nächsten Bildschirm können Sie einen Namen und einen Ort für Ihre Markierung definieren, indem Sie dieselbe Karte wie die vorherige verwenden.

entdecken Sie auch Wie zu komprimieren und die Größe von Bildern auf Wordpress

Sie können auch ein Symbol auswählen und Popup-Text für Ihre Markierung festlegen. Dies wird angezeigt, wenn Besucher auf die Markierung selbst klicken oder sie aus einer Liste auswählen, wenn Sie sie einschließen möchten.

Vergessen Sie auf keinen Fall, die Taste zu drücken veröffentlichen Sobald Sie fertig sind. Nach dem Hinzufügen einiger Markierungen sollte Ihre erste Ebene folgendermaßen aussehen:

Beispiel einer Ebene auf einem Block

Wenn Sie bereit sind, Ihre neue interaktive Karte zu einer Ihrer Seiten hinzuzufügen, sollten Sie a verwenden Kurzwahlnummern. Scrollen Sie zum oberen Rand der Registerkarte Ebene bearbeiten  und suchen Sie nach seiner entsprechenden ID:

Kartenkennungen speichern

Nun, platziere die Shortcode [Mapsmarker Layer = "X"] in Ihrem Beitrag oder Ihrer Seite. Vergessen Sie nicht, den Platzhalter zu ersetzen  durch die ID Ihrer "Ebene" im Voraus jedoch.

Ihre Karte sollte nun auf Ihrer Website einsatzbereit sein! Noch wichtiger ist, dass Sie oder andere Mitglieder Ihres Teams diese jederzeit bearbeiten und neue Markierungen hinzufügen können, ohne Ihr Dashboard verlassen zu müssen.

2. Verwenden der integrierten Einbettungsfunktion von Google Map

Google Maps braucht keine Einführung - es ist ein Dienst, mit dem Sie Karten aus der ganzen Welt extrahieren können, um Orte mit anderen Menschen zu teilen, Adressen zu finden und sogar zu teilen, wo Sie sich befinden. Wenn es um Websites geht, gibt es viele Möglichkeiten, Google Maps in Ihre Seiten zu integrieren. Speichern Sie Karten mit Google Map

Die meisten Karten bieten jedoch nur begrenzte Interaktivität. Mit ihnen können Sie durch sie navigieren, zoomen, beenden und Ihre Ansicht ändern, aber nicht mehr.

Tatsache ist, dass Google Maps viel mehr Funktionen bietet als nur einfaches Mapping. Sie können beispielsweise auch mehrere Markierungen hinzufügen, Entfernungen messen und Richtungen in Ihre Karten aufnehmen. Um diese Funktionen auszuprobieren, gehen Sie zu Google Meine Karten und klicken Sie auf die Schaltfläche  + Erstellen Sie eine neue Karte  :

Erstellen Sie eine Karte auf Google Map

Definieren Sie im nächsten Bildschirm einen Titel für Ihre Karte und deren ersten Layer, auf dem wir aufbauen werden. Suchen Sie nun mithilfe der Google Map-Suchleiste oben auf dem Bildschirm den Ort, den Sie freigeben möchten:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Neuer Karten- und Google-Kartenstandort

Während Sie hineinzoomen, können Sie das Markierungssymbol oben auf dem Bildschirm verwenden, um Orte auf Ihrer Karte hervorzuheben. Klicken Sie einfach auf die Stelle, an der Sie Ihren Marker platzieren möchten, und legen Sie dann einen Namen und ein Symbol dafür fest:

Fügen Sie Ihrer neuen Karte eine Markierung hinzu.

Sobald Sie mehrere Markierungen haben, können Sie Linien zwischen ihnen zeichnen, um die Abstände anzuzeigen:

Zeigen Sie einen Abstand zwischen zwei Punkten auf der Karte an

Wenn Ihre Karte fertig ist, klicken Sie auf die Schaltfläche Teilen im Menü auf der linken Seite. Ändern Sie dort die Zugriffseinstellungen  de privat  à Öffentlichkeit :

Kartenzugriff definieren

Sie können Teammitglieder auch einladen, ihre E-Mails zu verwenden, damit sie sofort auf die Karte zugreifen können:

Karte für die Zusammenarbeit mit Partnern

In jedem Fall sollten Sie Ihre neue Karte immer in Ihre Website einbetten. Sie können dies tun, indem Sie auf das Symbol mit den drei Punkten neben Ihrem Kartentitel klicken und auf die Option klicken Diese Karte einbetten  :

Karte einbettenJetzt können Sie den Einbettungscode kopieren und auf Ihren Seiten einfügen. Ihre neue Karte wird überall dort angezeigt, wo Sie sie platzieren. Darüber hinaus können Ihre Kollegen es bearbeiten und bei Bedarf über Google Maps neue Markierungen hinzufügen.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Das ultimative mathematische Captcha

Ultimate Math Captcha ist ein Premium-Captcha-Plugin von WordPress, das zu 100% effizient ist. Es ermöglicht das Hinzufügen von Mathe-Captcha zu WordPress-Login, Registrierung, Passwortwiederherstellung, Kommentaren, WooCommerce, einfachen digitalen Downloads und bbPress-Formularen.Ultimatives Mathe-Captcha-WordPress-Plugin

Zu den Funktionen gehören: einfache Installation und Konfiguration, Hinzufügen von Captcha zu vielen Formularen, Unterstützung mehrerer mathematischer Captcha auf derselben Seite, Anpassung von Fehlermeldungen und vieles mehr.

Download | DemoWeb-Hosting

2. PayPal Standard-Zahlungsportal für Ninja-Formulare

Mit PayPal Standard Gateway für Ninja Forms können Sie Formulare erstellen, die sich nahtlos in das PayPal-Zahlungsgateway integrieren lassen. Sie können personalisierte Bestellformulare erstellen und Zahlungen über Standard-Paypal-Konten erhalten.

Paypal Standard Zahlungsgateway für Ninja-Formulare

Die Hauptmerkmale sind: einfache und schnelle Integration, IPN-Integration, die Möglichkeit, das PayPal-Gateway in einzelnen Formularen zu aktivieren / deaktivieren, Unterstützung für regelmäßige Zahlungen usw.

Download | Demo |  Web-Hosting

3. Schwerkraftformen - Auflisten und Bearbeiten

Mit diesem Premium-WordPress-Plugin können Sie Einträge ändern oder löschen, die in den Formularen Ihrer Website eingereicht wurden. Eine Funktion, die im Gravity Forms-Plugin stark fehlt, weshalb diese Erweiterung erstellt wurde.Schwerkraft Formulare Liste WordPress Plugins bearbeiten Tabellen Grafiken Website Blog-Formular einfügen

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Unter seinen Merkmalen werden wir unter anderem erwähnen: die mBearbeiten und Speichern der aufgezeichneten Daten, diedie Unterdrückung der eingegebenen Daten, dieÄnderung und Löschung bereits veröffentlichter Artikel, die iPerfekte Integration mit jQuery Datatables Plugins und Schwerkraftformen, dieUnterstützung der bedingten Logik, seinfach und schnell zu installieren und vieles mehr.

Download Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Hier ! Das war's für dieses Tutorial. Ich hoffe, Sie können damit interaktive Karten in WordPress erstellen. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden zu WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
8 Aktien
Aktie4
tweet2
Registrieren2