Verwendung des Felds „Karte“

Möchten Sie eine Karte in Ihren Formularen anzeigen, um bestimmte Standorte zu zeigen oder Benutzern bei der Auswahl eines Standorts zu helfen? Mit dem Kartenfeld in WPForms können Sie interaktive Karten direkt in Ihre Formulare integrieren, wodurch Sie die Benutzererfahrung verbessern und präzise Standortdaten bereitstellen können.

In diesem Tutorial führen wir Sie durch die Schritte zur Verwendung des Feldes „Karte“ in WPForms.

---

Bevor Sie beginnen, installieren und aktivieren Sie das WPForms-Plugin auf Ihrer Website und überprüfen Sie Ihre Lizenz. Erstellen Sie dann ein neues Formular oder öffnen Sie ein bestehendes Formular zur Bearbeitung.

Einrichten des Geolocation Addons

Bevor Sie das Feld „Karte“ verwenden können, müssen Sie das Add-on „Geolocation“ installieren und konfigurieren. Das Feld „Karte“ ist Teil des Add-ons „Geolocation“ und erfordert dieselbe Einrichtung wie andere Geolokalisierungsfunktionen.

Sobald Sie diese Schritte abgeschlossen haben, können Sie das Feld „Karte“ in Ihren Formularen verwenden.

1. Hinzufügen eines Kartenfelds zu Ihrem Formular

Beginnen Sie damit, das Feld „Karte“ im Abschnitt „Ausgefallene Felder“ im Formular-Generator zu suchen. Klicken Sie auf das Feld „Karte“ oder ziehen Sie es per Drag & Drop in den Formular-Vorschau-Bereich, um es Ihrem Formular hinzuzufügen.

2. Konfigurieren von Kartenstandorten

Nachdem Sie das Feld „Karte“ hinzugefügt haben, klicken Sie im Formular-Generator darauf, um das Fenster „Feldoptionen“ zu öffnen. Konfigurieren Sie dann im Abschnitt „Standorte“ die Standorte, die auf Ihrer Karte angezeigt werden sollen.

Adressen hinzufügen

Geben Sie zunächst eine Adresse in das Adressfeld ein.

Während Sie tippen, werden Ihnen auf der Grundlage von Google Places-Daten Vorschläge zur automatischen Vervollständigung angezeigt. Wählen Sie dann den gewünschten Ort aus der Liste der Vorschläge aus.

Nachdem Sie eine Adresse ausgewählt haben, können Sie Folgendes hinzufügen:

• Name: Eine benutzerdefinierte Bezeichnung für den Standort, z. B. „Hauptsitz“ oder „Filiale in der Innenstadt“.
• Beschreibung: Zusätzliche Informationen zum Standort.

Standorte in der Nähe finden:

Aktivieren Sie die Option „Standorte in der Nähe suchen“, um die Vorschläge für die automatische Adressvervollständigung basierend auf Ihrem aktuellen Standort zu filtern.

Wenn diese Funktion aktiviert ist, fragt Ihr Browser nach der Erlaubnis, auf Ihren Standort zuzugreifen. Sobald die Erlaubnis erteilt wurde, werden Ihnen vorrangig Orte in Ihrer Nähe vorgeschlagen, sodass Sie Adressen in Ihrer Umgebung leichter finden und auswählen können.

Anzeige von Standortinformationen:

Aktivieren Sie die Option „Liste der Standorte anzeigen“, um die vollständigen Adressinformationen unterhalb der Karte im Frontend anzuzeigen. Dadurch können Benutzer eine Liste mit den Namen und Adressen aller von Ihnen konfigurierten Standorte anzeigen.

3. Anpassen von Kartenmarkierungen

Jeder Standort kann mit einem benutzerdefinierten Symbol oder Bild als Markierung versehen werden. Suchen Sie im Abschnitt „Standorte“ das Dropdown-Menü „Symbol“ für den Standort, den Sie anpassen möchten.

Wählen Sie „Symbol“, um aus über 2000 Font Awesome-Symbolen auszuwählen, oder wählen Sie „Bild“, um ein benutzerdefiniertes Bild hochzuladen.

Wenn Sie Symbole verwenden, klicken Sie auf das Symbolfeld, um die Symbolauswahl zu öffnen. Suchen Sie das gewünschte Symbol und wählen Sie es aus.

Wenn Sie Bilder verwenden möchten, klicken Sie auf „Bild hochladen“, um die Medienbibliothek zu öffnen. Laden Sie eine neue Datei hoch oder wählen Sie ein vorhandenes Bild aus Ihrer Medienbibliothek aus.

Anpassen des Aussehens von Markierungen

Um die Markierungsfarbe zu ändern, klicken Sie auf die Farbauswahl neben dem Symbolfeld. Sie können entweder aus voreingestellten Farben auswählen, die Farbauswahl ziehen, um eine beliebige Farbe auszuwählen, oder einen Hex-Farbwert direkt einfügen.

Um die Markierungen besser sichtbar zu machen, verwenden Sie das Dropdown-Menü neben dem Symbolfeld. Verfügbare Optionen sind: Klein, Mittel oder Groß. Größere Markierungen helfen Ihnen, Ihre benutzerdefinierten Orte von anderen Orten auf der Karte abzuheben.

Zoomstufe einstellen

Passen Sie das Feld „Zoomstufe“ an, um zu steuern, wie nah die Karte beim ersten Laden angezeigt wird. Der Standardwert ist 15, was der Standard-Zoomstufe für eingebettete Karten entspricht.

Wenn mehrere Standorte konfiguriert sind, passt sich der Zoomfaktor automatisch an, um alle Standorte anzuzeigen, und diese Einstellung ist deaktiviert.

4. Konfigurieren der erweiterten Karteneinstellungen

Für weitere Anpassungen klicken Sie im Bereich „Feldoptionen“ auf die Registerkarte „Erweitert “. Hier können Sie das Erscheinungsbild der Karte, Benutzerinteraktionen und die Darstellung in Formularfeldern steuern.

Präsentationseinstellungen

Entscheiden Sie, welche Elemente der Google Maps-Benutzeroberfläche auf Ihrer Karte angezeigt werden sollen:

• Vollbild ausblenden: Blendet die Vollbild-Schaltfläche aus, mit der Benutzer die Karte im Vollbildmodus anzeigen können.
• Kartentyp ausblenden: Blendet die Kartentypauswahl (Satellit, Gelände usw.) aus.
• Standortinformationen ausblenden: Blendet Standortinformationskarten aus, die beim Klicken auf Markierungen angezeigt werden.
• Street View ausblenden: Blendet die Street View-Steuerung aus.

Die meisten dieser Optionen sind standardmäßig ausgeblendet, um eine übersichtlichere Darstellung der Karte zu gewährleisten.

Interaktive Einstellungen

Steuern Sie, wie Benutzer mit der Karte interagieren:

• Kamera-Steuerung ausblenden: Blendet die Kamera-Steuerungsschaltflächen aus.
• Zoom ausblenden: Blendet die Schaltflächen zum Vergrößern und Verkleinern aus.
• Ziehen deaktivieren: Verhindert, dass Benutzer die Karte ziehen können, um sie zu verschieben.
• Mauszoom deaktivieren: Verhindert das Zoomen mit dem Mausrad.

Weitere Einstellungen

Zusätzliche Optionen für das Verhalten des Kartenfelds:

• In Eintrag anzeigen: Zeigt Kartendaten in Formular-Einträgen an.
• Miniaturansicht in Eintrag anzeigen: Zeigt eine Miniaturansicht der Karte in Formular-Einträgen an.
• Bezeichnung ausblenden: Blendet die Feldbezeichnung im Frontend aus.

5. Umgang mit mehreren Standorten

Verwenden Sie mehrere Standorte, wenn Sie mehrere Punkte auf einer einzigen Karte anzeigen müssen, z. B. mehrere Filialen, Abholstellen oder Zweigstellen. Mit dieser Funktion können Benutzer alle Standorte auf einmal anzeigen und optional ihren bevorzugten Standort auswählen.

Um mehrere Standorte zu Ihrer Karte hinzuzufügen, klicken Sie auf das Plus-Symbol (+) im Abschnitt „Standorte“ des Feldoptionsfensters. Jeder Standort kann ein eigenes Markierungssymbol, eine eigene Farbe, einen eigenen Namen und eine eigene Beschreibung haben.

Standortauswahl aktivieren

Wenn Sie zwei oder mehr Standorte konfiguriert haben, aktivieren Sie die Option „Standortauswahl zulassen “. Diese Funktion erfordert:

• Mindestens zwei Standorte wurden der Karte hinzugefügt.
• Die Option „Standortliste anzeigen“ muss aktiviert sein.

Mit dieser Option werden unterhalb der Karte Optionsfelder angezeigt, über die Benutzer ihren bevorzugten Standort auswählen können.

Häufig gestellte Fragen

Hier finden Sie Antworten auf einige der häufigsten Fragen, die wir zur Verwendung des Feldes „Karte“ in WPForms erhalten.

Kann ich andere Unternehmen und Sehenswürdigkeiten auf meiner Karte ausblenden?

Ja. Um POIs (Points of Interest) wie Restaurants und Geschäfte auszublenden, sodass nur Ihre benutzerdefinierten Markierungen sichtbar sind, müssen Sie in der Google Cloud Console einen benutzerdefinierten Kartenstil erstellen und diesen dann mithilfe eines Code-Schnipsels auf Ihr Kartenfeld anwenden. Da die Gestaltung der Karte über die cloudbasierte Gestaltungsfunktion von Google verwaltet wird, erfolgt diese Konfiguration in Ihrem Google Cloud Console-Dashboard.

Schau dir unsere Entwickler-Dokumentation zum Anwenden von benutzerdefinierten Kartenstilen auf das Kartenfeld an, um eine Schritt-für-Schritt-Anleitung zu bekommen.

Das war's schon! Jetzt wissen Sie, wie Sie das Feld „Karten“ in WPForms verwenden können, um Ihre Formulare mit interaktiven Karten und präzisen Standortdaten zu verbessern.

Möchten Sie als Nächstes das Design Ihrer Formulare mit vorgefertigten Designs ganz einfach verbessern? In unserem Leitfaden zurVerwendung von Formular-Designsfinden Sie alle Details dazu, wie Sie diese Designs auf Ihre Formulare anwenden können.