Verwendung des Kartenfelds

Möchten Sie eine Karte in Ihren Formularen anzeigen, um bestimmte Orte zu zeigen oder Benutzern bei der Auswahl eines Ortes zu helfen? Das Kartenfeld in WPForms ermöglicht es Ihnen, interaktive Karten direkt in Ihre Formulare zu integrieren, was die Benutzererfahrung verbessert und präzise Standortdaten liefert.

In diesem Tutorial führen wir Sie durch die Schritte zur Verwendung des Kartenfelds in WPForms.

---

Stellen Sie vor Beginn sicher, dass Sie das WPForms-Plugin installiert und aktiviert haben und Ihre Lizenz verifiziert haben. Erstellen Sie dann ein neues Formular oder öffnen Sie ein vorhandenes zur Bearbeitung.

Einrichtung des Geolocation-Addons

Bevor Sie das Kartenfeld verwenden können, installieren und konfigurieren Sie das Geolocation-Addon. Das Kartenfeld ist Teil des Geolocation-Addons und erfordert die gleiche Einrichtung wie andere Geolocation-Funktionen.

Sobald Sie diese Schritte abgeschlossen haben, können Sie das Kartenfeld in Ihren Formularen verwenden.

1. Hinzufügen eines Kartenfelds zu Ihrem Formular

Beginnen Sie damit, das Kartenfeld im Formular-Builder unter der Kategorie "Fancy Fields" zu suchen. Klicken Sie auf das Kartenfeld oder ziehen Sie es per Drag & Drop in den Formular-Vorschau-Bereich, um es zu Ihrem Formular hinzuzufügen.

2. Konfiguration von Kartenstandorten

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

Adressen hinzufügen

Beginnen Sie mit der Eingabe einer Adresse im Feld Adresse.

Während Sie tippen, werden Autovervollständigungsvorschläge basierend auf Google Places-Daten 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 hinzufügen:

• Name: Eine benutzerdefinierte Bezeichnung für den Ort, z. B. „Hauptbüro“ oder „Downtown Store“.
• Beschreibung: Zusätzliche Informationen über den Ort.

Standorte in der Nähe finden:

Aktivieren Sie die Option Standorte in der Nähe finden, um die Autovervollständigungsvorschläge für Adressen basierend auf Ihrem aktuellen geografischen Standort zu filtern.

Wenn diese Option aktiviert ist, fordert Ihr Browser die Erlaubnis an, auf Ihren Standort zuzugreifen. Sobald die Erlaubnis erteilt wurde, werden Vorschläge bevorzugt, die sich in Ihrer Nähe befinden, was die Suche und Auswahl von Adressen in Ihrer Umgebung erleichtert.

Anzeigen von Standortinformationen:

Aktivieren Sie die Option Liste der Standorte anzeigen, um die vollständigen Adressinformationen unter der Karte im Frontend anzuzeigen. Dies ermöglicht es Benutzern, eine Liste mit Namen und Adressen für jeden von Ihnen konfigurierten Ort zu sehen.

3. Anpassen von Kartenmarkierungen

Jeder Ort kann ein benutzerdefiniertes Symbol oder Bild als Markierung haben. Suchen Sie im Abschnitt "Orte" das Dropdown-Menü "Symbol" für den Ort, 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 Feldsymbol, um den Symbolauswähler zu öffnen. Suchen Sie nach dem gewünschten Symbol und wählen Sie es aus.

Wenn Sie Bilder verwenden, 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 Markierungserscheinungsbilds

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

Um die Markierungen hervorzuhebender zu gestalten, verwenden Sie das Dropdown-Menü "Größe" neben dem Feldsymbol. Verfügbare Optionen sind: Klein, Mittel oder Groß. Größere Markierungen helfen Ihren benutzerdefinierten Orten, sich von anderen Orten auf der Karte abzuheben.

Festlegen der Zoomstufe

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

Wenn mehrere Orte konfiguriert sind, passt sich die Zoomstufe automatisch an, um alle Orte anzuzeigen, und diese Einstellung ist deaktiviert.

4. Konfiguration erweiterter Karteneinstellungen

Für zusätzliche Anpassungen klicken Sie auf die Registerkarte Erweitert im Bereich "Feldoptionen". Hier können Sie das Erscheinungsbild der Karte, Benutzerinteraktionen und die Anzeige in Formulareinträgen steuern.

Darstellungseinstellungen

Entscheiden Sie, welche Google Maps UI-Elemente auf Ihrer Karte sichtbar sind:

• Vollbild ausblenden: Blendet die Schaltfläche "Vollbild" aus, mit der Benutzer die Karte im Vollbildmodus anzeigen können.
• Kartentyp ausblenden: Blendet den Kartentyp-Selektor (Satellit, Gelände usw.) aus.
• Ortsinformationen ausblenden: Blendet Informationskarten für Orte aus, die beim Klicken auf Markierungen erscheinen.
• Street View ausblenden: Blendet die Street View-Steuerung aus.

Die meisten dieser Optionen sind standardmäßig ausgeblendet, um eine sauberere Kartenansicht zu bieten.

Interaktive Einstellungen

Steuern Sie, wie Benutzer mit der Karte interagieren:

• Kamerasteuerung ausblenden: Blendet die Schaltflächen zur Kamerasteuerung aus.
• Zoom ausblenden: Blendet die Schaltflächen zum Vergrößern und Verkleinern aus.
• Ziehen deaktivieren: Verhindert, dass Benutzer die Karte durch Ziehen 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 Formulareinträgen an.
• Miniaturansicht in Eintrag anzeigen: Zeigt eine Miniaturansicht der Karte in Formulareinträgen an.
• Label ausblenden: Blendet das Feld-Label 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 Geschäftsstandorte, Abholpunkte oder Zweigstellen. Diese Funktion ermöglicht es Benutzern, alle Standorte auf einmal zu sehen und optional ihren bevorzugten Standort auszuwählen.

Um Ihrer Karte mehrere Standorte hinzuzufügen, klicken Sie auf das Pluszeichen (+) im Abschnitt Standorte des Bedienfelds „Feldoptionen“. Jeder Standort kann sein eigenes eindeutiges Markierungssymbol, seine eigene Farbe, seinen eigenen Namen und seine 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, die der Karte hinzugefügt wurden.
• Die Option Liste der Standorte anzeigen muss aktiviert sein.

Mit dieser Option erscheinen unter der Karte Optionsfelder, mit denen Benutzer ihren bevorzugten Standort auswählen können.

Häufig gestellte Fragen

Dies sind Antworten auf einige der häufigsten Fragen, die wir zum Map-Feld in WPForms erhalten.

Kann ich andere Unternehmen und Points of Interest auf meiner Karte ausblenden?

Ja. Um Points of Interest (POIs) wie Restaurants und Geschäfte auszublenden, sodass nur Ihre benutzerdefinierten Markierungen sichtbar sind, müssen Sie einen benutzerdefinierten Kartenstil in der Google Cloud Console erstellen und ihn dann mit einem Code-Snippet auf Ihr Map-Feld anwenden. Da die Kartenformatierung über die cloudbasierte Formatierungsfunktion von Google verwaltet wird, erfolgt diese Konfiguration in Ihrem Google Cloud Console-Dashboard.

Siehe unsere Entwicklerdokumentation zum Anwenden benutzerdefinierter Kartenstile auf das Map-Feld für Schritt-für-Schritt-Anleitungen.

Das ist alles! Sie wissen jetzt, wie Sie das Map-Feld in WPForms verwenden, um Ihre Formulare mit interaktiven Karten und präzisen Standortdaten zu erweitern.

Möchten Sie als Nächstes das Design Ihrer Formulare ganz einfach mit vorgefertigten Themes verbessern? Lesen Sie unbedingt unseren Leitfaden zur Verwendung von Formular-Themes, um alle Details zur Anwendung dieser Themes auf Ihre Formulare zu erfahren.