Riepilogo AI
Vuoi nascondere i punti di interesse (POI) come ristoranti, negozi e altre attività commerciali sul tuo campo mappa in modo che siano visibili solo i tuoi indicatori personalizzati? Google Maps visualizza questi POI per impostazione predefinita, ma puoi personalizzare l'aspetto della mappa utilizzando la funzione di personalizzazione delle mappe basata su cloud di Google Cloud Console.
Questo tutorial mostra come creare uno stile di mappa personalizzato in Google Cloud Console, configurarlo per nascondere i POI e applicarlo al campo mappa WPForms utilizzando uno snippet di codice.
Creazione di uno stile di mappa personalizzato nella Console Google Cloud
Per iniziare, apri Google Cloud Console e seleziona il progetto in cui è configurata la tua chiave API di Google Places. Quindi, fai clic su Stili mappa dalla barra laterale sinistra oppure vai direttamente a Stili mappa.
Una volta lì, clicca sul pulsante Crea stile mappa per iniziare un nuovo stile mappa.
Successivamente, nella finestra modale che appare, seleziona una modalità per la tua mappa scegliendo tra Chiara o Scura. Se lo desideri, puoi anche selezionare un tema opzionale come Monocromatico per applicare uno stile aggiuntivo. Una volta effettuate le selezioni, fai clic sul pulsante Personalizza per aprire l'editor di stile.
Una volta aperto l'editor di stile, individua e clicca sulla categoria Punti di interesse. Si aprirà un elenco di singoli tipi di punti di interesse (POI), quali Emergenze, Intrattenimento, Ristorazione, Alloggi, Attività ricreative, Negozi e altri.
Per nascondere i POI, clicca sull'icona a forma di occhio sul lato destro dello schermo per ciascuna categoria che desideri nascondere. Puoi nascondere tutti i POI contemporaneamente cliccando sull'icona a forma di occhio accanto alla categoria principale Punti di interesse, oppure puoi nascondere in modo selettivo tipi specifici di POI cliccando sull'icona a forma di occhio accanto a ciascuna singola categoria.
Dopo aver configurato lo stile della mappa, clicca su Salva.
Ottenere il tuo ID mappa
Una volta pubblicato il tuo stile, dovrai creare un ID mappa e associarlo al tuo stile per poterlo utilizzare in WPForms.
Per farlo, vai alla sezione Gestione mappe dalla barra laterale sinistra e clicca su Crea ID mappa nella tua Google Cloud Console.
Nella finestra di dialogo che appare, inserisci un nome descrittivo per il tuo ID mappa, seleziona JavaScript come tipo di mappa e scegli Vettoriale tra le opzioni disponibili.
Una volta fatto, clicca su Salva per creare il nuovo ID mappa.
Una volta creato l'ID mappa, scorri verso il basso nella pagina ID mappa fino alla sezione Stili mappa. Fai clic sull'icona a forma di matita accanto allo stile mappa predefinito di Google.
Si aprirà una barra laterale in cui dovrai selezionare lo stile personalizzato della mappa. Nella barra laterale, individua lo stile pubblicato nella sezione I miei stili e selezionalo.
Quindi, clicca su Fatto per associare il tuo stile personalizzato all'ID mappa.
Ciò garantisce che lo stile configurato venga applicato ogni volta che viene utilizzato questo ID mappa.
Infine, copia il valore dell'ID mappa visualizzato nella pagina ID mappa, poiché ti servirà per integrare lo stile personalizzato con WPForms nel passaggio successivo.
Applicazione dell'ID mappa al campo mappa
Per applicare lo stile personalizzato alla mappa nel campo mappa di WPForms, utilizza il seguente snippet di codice PHP. Personalizzalo con l'ID del modulo, l'ID del campo e l'ID della mappa che hai copiato.
- Su riga 11, sostituire
111con il tuo ID modulo effettivo - Su linea 15, sostituire
222con il tuo ID campo mappa effettivo - Su linea 19, sostituire
'your-map-id'con l'ID mappa che hai copiato da Google Cloud Console (mantieni le virgolette intorno ad esso)
Dopo aver salvato il frammento di codice con i valori personalizzati, il campo mappa utilizzerà lo stile personalizzato da Google Cloud Console. La mappa mostrerà solo i tuoi indicatori personalizzati senza alcun punto di interesse, offrendoti una visione chiara e mirata delle tue posizioni.
Ecco fatto! Ora puoi nascondere i punti di interesse sul tuo campo mappa e mostrare solo i tuoi indicatori personalizzati. Per ulteriori modi di personalizzare i tuoi moduli, consulta la nostra guida sulla personalizzazione di WPForms con il codice.