Utilizzo del campo Mappa

Vuoi visualizzare una mappa sui tuoi moduli per mostrare posizioni specifiche o aiutare gli utenti a selezionare una posizione? Il campo Mappa in WPForms ti consente di integrare mappe interattive direttamente nei tuoi moduli, migliorando l'esperienza utente e fornendo dati precisi sulla posizione.

In questo tutorial, ti guideremo attraverso i passaggi per utilizzare il campo Mappa in WPForms.

---

Prima di iniziare, assicurati di installare e attivare il plugin WPForms sul tuo sito e verificare la tua licenza. Quindi crea un nuovo modulo o apri uno esistente per la modifica.

Configurazione del componente aggiuntivo Geolocation

Prima di poter utilizzare il campo Mappa, installa e configura il componente aggiuntivo Geolocation. Il campo Mappa fa parte del componente aggiuntivo Geolocation e richiede la stessa configurazione delle altre funzionalità di geolocalizzazione.

Una volta completati questi passaggi, puoi iniziare a utilizzare il campo Mappa nei tuoi moduli.

1. Aggiungere un campo Mappa al tuo modulo

Inizia individuando il campo Mappa nella sezione Campi Fantasia (Fancy Fields) nel generatore di moduli. Fai clic sul campo Mappa o trascinalo nell'area di anteprima del modulo per aggiungerlo al tuo modulo.

2. Configurare le posizioni della mappa

Dopo aver aggiunto il campo Mappa, fai clic su di esso nel generatore di moduli per aprire il pannello Opzioni campo. Quindi, configura le posizioni che appariranno sulla tua mappa dalla sezione Posizioni.

Aggiungere indirizzi

Inizia digitando un indirizzo nel campo Indirizzo.

Mentre digiti, appariranno suggerimenti di completamento automatico basati sui dati di Google Places. Quindi, seleziona la posizione desiderata dall'elenco dei suggerimenti.

Dopo aver selezionato un indirizzo, puoi aggiungere:

• Nome: Un'etichetta personalizzata per la posizione, come "Ufficio principale" o "Negozio in centro".
• Descrizione: Informazioni aggiuntive sulla posizione.

Trovare posizioni nelle vicinanze:

Abilita l'opzione Trova posizioni nelle vicinanze per filtrare i suggerimenti di completamento automatico degli indirizzi in base alla tua posizione geografica attuale.

Quando attivato, il tuo browser richiederà il permesso di accedere alla tua posizione. Una volta concesso il permesso, i suggerimenti daranno priorità alle posizioni vicine, rendendo più facile trovare e selezionare indirizzi nella tua zona.

Visualizzare le informazioni sulla posizione:

Abilita l'opzione Mostra elenco posizioni per visualizzare le informazioni complete sull'indirizzo sotto la mappa sul frontend. Ciò consente agli utenti di vedere un elenco che mostra il nome e l'indirizzo di ogni posizione configurata.

3. Personalizzare i contrassegni della mappa

Ogni posizione può avere un'icona o un'immagine personalizzata come contrassegno. Nella sezione Posizioni, trova il menu a discesa Icona per la posizione che desideri personalizzare.

Seleziona Icona per scegliere tra oltre 2000 icone Font Awesome, oppure seleziona Immagine per caricare un'immagine personalizzata.

Se si utilizzano icone, fare clic sul campo icona per aprire il selettore di icone. Cercare l'icona desiderata e selezionarla.

Se si utilizzano immagini, fare clic su Carica immagine per aprire la libreria multimediale. Caricare un nuovo file o selezionare un'immagine esistente dalla libreria multimediale.

Personalizzazione dell'aspetto del marcatore

Per cambiare il colore del marcatore, fare clic sul selettore di colore accanto al campo icona. È possibile selezionare tra colori preimpostati, trascinare il selettore di colore per scegliere qualsiasi colore o incollare direttamente un valore di colore esadecimale.

Per rendere i marcatori più evidenti, utilizzare il menu a discesa delle dimensioni accanto al campo icona. Le opzioni disponibili sono: Piccolo, Medio o Grande. Marcatori più grandi aiutano le tue posizioni personalizzate a distinguersi dalle altre posizioni sulla mappa.

Impostazione del livello di zoom

Regolare il campo Livello di zoom per controllare quanto appare vicina la mappa al suo primo caricamento. Il valore predefinito è 15, che è il livello di zoom standard per le mappe incorporate.

Quando sono configurate più posizioni, il livello di zoom si regola automaticamente per visualizzare tutte le posizioni e questa impostazione viene disabilitata.

4. Configurare le impostazioni avanzate della mappa

Per ulteriori personalizzazioni, fare clic sulla scheda Avanzate nel pannello Opzioni campo. Qui è possibile controllare l'aspetto della mappa, le interazioni dell'utente e come viene visualizzata nelle voci del modulo.

Impostazioni di presentazione

Decidere quali elementi dell'interfaccia utente di Google Maps sono visibili sulla mappa:

• Nascondi schermo intero: Nasconde il pulsante a schermo intero che consente agli utenti di visualizzare la mappa in modalità a schermo intero.
• Nascondi tipo di mappa: Nasconde il selettore del tipo di mappa (satellite, terreno, ecc.).
• Nascondi informazioni sulla posizione: Nasconde le schede informative sulla posizione che appaiono facendo clic sui marcatori.
• Nascondi Street View: Nasconde il controllo di Street View.

La maggior parte di queste opzioni è nascosta per impostazione predefinita per fornire un aspetto più pulito alla mappa.

Impostazioni interattive

Controllare come gli utenti interagiscono con la mappa:

• Nascondi controllo fotocamera: Nasconde i pulsanti di controllo della fotocamera.
• Nascondi zoom: Nasconde i pulsanti di zoom avanti e indietro.
• Disabilita trascinamento: Impedisce agli utenti di trascinare la mappa per spostarla.
• Disabilita zoom con mouse: Impedisce lo zoom con la rotellina del mouse.

Altre impostazioni

Opzioni aggiuntive per il comportamento del campo mappa:

• Mostra nella voce: Visualizza i dati della mappa nelle voci del modulo.
• Mostra miniatura nella voce: Mostra una miniatura della mappa nelle voci del modulo.
• Nascondi etichetta: Nasconde l'etichetta del campo sul frontend.

5. Gestire più posizioni

Utilizzare più posizioni quando è necessario visualizzare diversi punti su una singola mappa, come più sedi di negozi, punti di ritiro o filiali. Questa funzionalità consente agli utenti di vedere tutte le posizioni contemporaneamente e, facoltativamente, di selezionare la propria posizione preferita.

Per aggiungere più posizioni alla mappa, fare clic sull'icona più (+) nella sezione Posizioni del pannello Opzioni campo. Ogni posizione può avere la propria icona del marcatore, colore, nome e descrizione univoci.

Abilita selezione posizione

Quando hai configurato due o più posizioni, abilita l'opzione Consenti selezione posizione. Questa funzionalità richiede:

• Almeno due posizioni aggiunte alla mappa.
• L'opzione Mostra elenco posizioni abilitata.

Con questa opzione, i pulsanti di opzione appaiono sotto la mappa, consentendo agli utenti di selezionare la loro posizione preferita.

Domande frequenti

Queste sono le risposte ad alcune delle domande più comuni che riceviamo sull'utilizzo del campo Mappa in WPForms.

Posso nascondere altre attività e punti di interesse sulla mia mappa?

Sì. Per nascondere punti di interesse (POI) come ristoranti e negozi in modo che siano visibili solo i tuoi contrassegni personalizzati, dovrai creare uno stile di mappa personalizzato in Google Cloud Console e quindi applicarlo al tuo campo Mappa utilizzando uno snippet di codice. Poiché lo stile della mappa è gestito tramite la funzionalità di stile basata su cloud di Google, questa configurazione viene eseguita nella dashboard di Google Cloud Console.

Consulta la nostra documentazione per sviluppatori su applicazione di stili di mappa personalizzati al campo Mappa per istruzioni dettagliate.

Ecco fatto! Ora sai come utilizzare il campo Mappe in WPForms per migliorare i tuoi moduli con mappe interattive e dati di posizione precisi.

Successivamente, vuoi migliorare facilmente il design dei tuoi moduli con temi pronti all'uso? Assicurati di consultare la nostra guida su come utilizzare i temi dei moduli per tutti i dettagli su come applicare questi temi ai tuoi moduli.