Utilizzo del campo Mappa

Desideri 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 necessari per utilizzare il campo Mappa in WPForms.

---

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

Impostazione dell'addon Geolocation

Prima di poter utilizzare il campo Mappa, è necessario installare e configurare l'add-on Geolocalizzazione. Il campo Mappa fa parte dell'add-on Geolocalizzazione e richiede la stessa configurazione delle altre funzionalità di geolocalizzazione.

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

1. Aggiungere un campo mappa al modulo

Inizia individuando il campo Mappa nella sezione Campi avanzati del generatore di moduli. Clicca sul campo Mappa o trascinalo nell'area di anteprima del modulo per aggiungerlo al tuo modulo.

2. Configurazione delle posizioni sulla mappa

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

Aggiunta di indirizzi

Inizia digitando un indirizzo nel campo Indirizzo.

Durante la digitazione, verranno visualizzati 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, ad esempio "Sede centrale" o "Negozio in centro".
• Descrizione: Ulteriori informazioni sulla posizione.

Trovare luoghi nelle vicinanze:

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

Una volta attivata, il browser richiederà l'autorizzazione per accedere alla tua posizione. Una volta concessa l'autorizzazione, i suggerimenti daranno la priorità alle località vicine, rendendo più facile trovare e selezionare gli indirizzi nelle tue vicinanze.

Visualizzazione delle informazioni sulla posizione:

Abilita l'opzione Mostra elenco delle località per visualizzare le informazioni complete sull'indirizzo sotto la mappa sul frontend. Ciò consente agli utenti di visualizzare un elenco con il nome e l'indirizzo di ciascuna località configurata.

3. Personalizzazione degli indicatori sulla mappa

Ogni posizione può avere un'icona o un'immagine personalizzata come indicatore. Nella sezione Posizioni, trova il menu a tendina 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 le icone, fare clic sul campo dell'icona per aprire il selettore delle 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 dei marcatori

Per cambiare il colore dell'indicatore, clicca sul selettore di colori accanto al campo dell'icona. Puoi scegliere tra i colori predefiniti, trascinare il selettore di colori per scegliere qualsiasi colore o incollare direttamente un valore esadecimale.

Per rendere i marcatori più evidenti, utilizza il menu a tendina accanto al campo dell'icona. Le opzioni disponibili sono: Piccolo, Medio o Grande. I marcatori più grandi aiutano le tue posizioni personalizzate a distinguersi dalle altre posizioni sulla mappa.

Impostazione del livello di zoom

Regola il campo Livello di zoom per controllare quanto sarà ingrandita la mappa al primo caricamento. Il valore predefinito è 15, che corrisponde al 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. Configurazione delle impostazioni avanzate della mappa

Per ulteriori personalizzazioni, clicca sulla scheda Avanzate nel pannello Opzioni campo. Qui puoi controllare l'aspetto della mappa, le interazioni dell'utente e la modalità di visualizzazione nei campi del modulo.

Impostazioni di presentazione

Decidi quali elementi dell'interfaccia utente di Google Maps rendere visibili sulla tua mappa:

• Nascondi schermo intero: nasconde il pulsante schermo intero che consente agli utenti di visualizzare la mappa in modalità 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 quando si clicca sui marcatori.
• Nascondi Street View: nasconde il controllo Street View.

La maggior parte di queste opzioni sono nascoste per impostazione predefinita per garantire una visualizzazione più chiara della mappa.

Impostazioni interattive

Controlla come gli utenti interagiscono con la mappa:

• Nascondi controllo fotocamera: nasconde i pulsanti di controllo della fotocamera.
• Nascondi zoom: nasconde i pulsanti di ingrandimento e riduzione.
• Disattiva trascinamento: impedisce agli utenti di trascinare la mappa per spostarsi.
• Disattiva zoom con il mouse: impedisce lo zoom con la rotellina del mouse.

Altre impostazioni

Opzioni aggiuntive relative al 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. Gestione di più sedi

Utilizza più posizioni quando devi visualizzare diversi punti su una singola mappa, come più sedi di negozi, punti di ritiro o filiali. Questa funzione consente agli utenti di vedere tutte le posizioni contemporaneamente e, facoltativamente, di selezionare la loro posizione preferita.

Per aggiungere più posizioni alla mappa, clicca sull'icona più (+) nella sezione Posizioni del pannello Opzioni campo. Ogni posizione può avere una propria icona, un colore, un nome e una descrizione unici.

Abilitazione della selezione della posizione

Quando sono configurate due o più posizioni, abilitare l'opzione Consenti selezione posizione. Questa funzione richiede:

• Almeno due località aggiunte alla mappa.
• L'opzione Mostra elenco delle posizioni deve essere abilitata.

Con questa opzione, sotto la mappa vengono visualizzati dei pulsanti di opzione che consentono agli utenti di selezionare la località preferita.

Domande frequenti

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

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

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

Consulta la nostra documentazione per sviluppatori sull'applicazione di stili 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 localizzazione precisi.

Ti piacerebbe migliorare facilmente il design dei tuoi moduli con temi già pronti? Dai un'occhiata alla nostra guidaall'uso dei temi per moduliper tutti i dettagli su come applicare questi temi ai tuoi moduli.