KI-Zusammenfassung
Möchten Sie Points of Interest (POIs) wie Restaurants, Geschäfte und andere Unternehmen auf Ihrem Kartenfeld ausblenden, sodass nur Ihre benutzerdefinierten Markierungen sichtbar sind? Google Maps zeigt diese POIs standardmäßig an, aber Sie können das Erscheinungsbild der Karte mit der Cloud-basierten Kartenstyling-Funktion der Google Cloud Console anpassen.
Dieses Tutorial zeigt Ihnen, wie Sie einen benutzerdefinierten Kartenstil in der Google Cloud Console erstellen, ihn so konfigurieren, dass POIs ausgeblendet werden, und ihn mit einem Code-Snippet auf Ihr WPForms-Kartenfeld anwenden.
Erstellen eines benutzerdefinierten Kartenstils in der Google Cloud Console
Öffnen Sie zunächst die Google Cloud Console und wählen Sie das Projekt aus, in dem Ihr Google Places API-Schlüssel konfiguriert ist. Klicken Sie dann im linken Seitenmenü auf Map Styles oder rufen Sie direkt Map Styles auf.
Klicken Sie dort auf die Schaltfläche Map Style erstellen, um einen neuen Kartenstil zu beginnen.
Wählen Sie im erscheinenden Modalfenster als Nächstes einen Modus für Ihre Karte aus, indem Sie entweder Light oder Dark wählen. Wenn gewünscht, können Sie auch ein optionales Thema wie Monochrome auswählen, um zusätzliche Stile anzuwenden. Wenn Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche Anpassen, um den Stil-Editor zu öffnen.
Sobald der Stil-Editor geöffnet ist, suchen und klicken Sie auf die Kategorie Points of interest. Diese wird erweitert, um eine Liste einzelner Points of Interest (POI)-Typen anzuzeigen, wie z. B. Notfall, Unterhaltung, Essen und Trinken, Unterkunft, Erholung, Einzelhandel und andere.
Um POIs auszublenden, klicken Sie auf das Augensymbol auf der rechten Seite des Bildschirms für jede Kategorie, die Sie ausblenden möchten. Sie können alle POIs auf einmal ausblenden, indem Sie auf das Augensymbol neben der Hauptkategorie Points of Interest klicken, oder Sie können bestimmte POI-Typen selektiv ausblenden, indem Sie auf das Augensymbol neben jeder einzelnen Kategorie klicken.
Nachdem Sie Ihren Kartenstil konfiguriert haben, klicken Sie auf Speichern.
Abrufen Ihrer Karten-ID
Sobald Ihr Stil veröffentlicht ist, müssen Sie eine Karten-ID erstellen und sie mit Ihrem Stil verknüpfen, um sie in WPForms zu verwenden.
Navigieren Sie dazu im linken Seitenmenü zum Abschnitt Map Management und klicken Sie in Ihrer Google Cloud Console auf Map ID erstellen.
Geben Sie im erscheinenden Dialog einen beschreibenden Namen für Ihre Karten-ID ein, wählen Sie JavaScript als Kartentyp und wählen Sie Vector aus den verfügbaren Optionen.
Klicken Sie anschließend auf Speichern, um die neue Karten-ID zu erstellen.
Nachdem Ihre Karten-ID erstellt wurde, scrollen Sie auf der Seite Karten-ID nach unten zum Abschnitt Map styles. Klicken Sie auf das Stiftsymbol neben dem Kartenstil Google default.
Dies öffnet eine Seitenleiste, in der Sie Ihren benutzerdefinierten Kartenstil auswählen müssen. Suchen Sie in der Seitenleiste Ihren veröffentlichten Stil im Abschnitt My Styles und wählen Sie ihn aus.
Klicken Sie dann auf Fertig, um Ihren benutzerdefinierten Stil der Karten-ID zuzuordnen.
Dadurch wird sichergestellt, dass der von Ihnen konfigurierte Stil jedes Mal angewendet wird, wenn diese Karten-ID verwendet wird.
Kopieren Sie abschließend den Wert der Karten-ID, der auf der Seite Karten-ID angezeigt wird, da Sie diese ID benötigen, um den benutzerdefinierten Stil im nächsten Schritt in WPForms zu integrieren.
Anwenden der Karten-ID auf Ihr Kartenfeld
Um Ihren benutzerdefinierten Kartenstil auf das WPForms-Kartenfeld anzuwenden, verwenden Sie den folgenden PHP-Code-Snippet. Passen Sie ihn mit Ihrer Formular-ID, Feld-ID und der kopierten Karten-ID an.
- Ersetzen Sie in Zeile 11 die Zahl
111durch Ihre tatsächliche Formular-ID - Ersetzen Sie in Zeile 15 die Zahl
222durch Ihre tatsächliche Kartenfeld-ID - Ersetzen Sie in Zeile 19
'your-map-id'durch die Karten-ID, die Sie aus der Google Cloud Console kopiert haben (behalten Sie die Anführungszeichen bei).
Nachdem Sie den Code-Snippet mit Ihren angepassten Werten gespeichert haben, verwendet Ihr Kartenfeld den benutzerdefinierten Stil aus der Google Cloud Console. Die Karte zeigt nur Ihre benutzerdefinierten Marker ohne interessante Punkte an, was Ihnen eine klare, fokussierte Ansicht Ihrer Standorte bietet.
Das ist alles! Sie können jetzt interessante Punkte auf Ihrem Kartenfeld ausblenden und nur Ihre benutzerdefinierten Marker anzeigen. Weitere Möglichkeiten zur Anpassung Ihrer Formulare finden Sie in unserem Leitfaden zur Anpassung von WPForms mit Code.