Riassunto AI
Vuoi nascondere punti di interesse (POI) come ristoranti, negozi e altre attività sul tuo campo Mappa in modo che siano visibili solo i tuoi contrassegni personalizzati? Google Maps visualizza questi POI per impostazione predefinita, ma puoi personalizzare l'aspetto della mappa utilizzando la funzione di stile mappa basata su cloud della Google Cloud Console.
Questo tutorial mostra come creare uno stile mappa personalizzato nella Google Cloud Console, configurarlo per nascondere i POI e applicarlo al tuo campo Mappa di WPForms utilizzando uno snippet di codice.
Creazione di uno stile mappa personalizzato nella Google Cloud Console
Per iniziare, apri la Google Cloud Console e seleziona il progetto in cui è configurata la tua chiave API di Google Places. Successivamente, fai clic su Stili mappa dalla barra laterale sinistra o vai direttamente a Stili mappa.
Una volta lì, fai clic 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 Chiaro o Scuro. Se 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 fai clic sulla categoria Punti di interesse. Questa si espande per rivelare un elenco di singoli tipi di Punti di interesse (POI), come Emergenze, Intrattenimento, Cibo e bevande, Alloggi, Ricreazione, Vendita al dettaglio e altri.
Per nascondere i POI, fai clic sull'icona dell'occhio sul lato destro dello schermo per ogni categoria che desideri nascondere. Puoi nascondere tutti i POI contemporaneamente facendo clic sull'icona dell'occhio accanto alla categoria principale Punti di interesse, oppure puoi nascondere selettivamente tipi specifici di POI facendo clic sull'icona dell'occhio accanto a ciascuna categoria individuale.
Dopo aver configurato il tuo stile mappa, fai clic su Salva.
Ottenere il tuo ID mappa
Una volta pubblicato il tuo stile, dovrai creare un ID mappa e associarlo al tuo stile per utilizzarlo in WPForms.
Per farlo, naviga nella sezione Gestione mappe dalla barra laterale sinistra e fai clic 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 Vettore tra le opzioni disponibili.
Una volta fatto, fai clic su Salva per creare il nuovo ID mappa.
Una volta creato il tuo ID mappa, scorri verso il basso nella pagina ID mappa fino alla sezione Stili mappa. Fai clic sull'icona della matita accanto allo stile mappa Predefinito di Google.
Questo apre una barra laterale in cui dovrai selezionare il tuo stile mappa personalizzato. Nella barra laterale, trova il tuo stile pubblicato nella sezione I miei stili e selezionalo.
Quindi, fai clic su Fine per associare il tuo stile personalizzato all'ID mappa.
Ci ilde{o} garantisce che lo stile configurato verr ilde{a} applicato ogni volta che viene utilizzato questo ID mappa.
Infine, copia il valore ID mappa visualizzato nella pagina ID mappa, in quanto avrai bisogno di questo ID per integrare lo stile personalizzato con WPForms nel passaggio successivo.
Applicazione dell'ID mappa al tuo campo Mappa
Per applicare il tuo stile mappa personalizzato al campo mappa WPForms, utilizza il seguente snippet di codice PHP. Personalizzalo con l'ID del modulo, l'ID del campo e l'ID mappa che hai copiato.
- Alla riga 11, sostituisci
111con l'ID effettivo del tuo modulo - Alla riga 15, sostituisci
222con l'ID effettivo del tuo campo mappa - Alla riga 19, sostituisci
'your-map-id'con l'ID mappa copiato dalla Google Cloud Console (mantieni le virgolette attorno)
Dopo aver salvato lo snippet di codice con i tuoi valori personalizzati, il tuo campo mappa utilizzerà lo stile personalizzato dalla Google Cloud Console. La mappa visualizzerà solo i tuoi indicatori personalizzati senza alcun punto di interesse, offrendoti una visualizzazione pulita e focalizzata 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 per personalizzare i tuoi moduli, consulta la nostra guida su come personalizzare WPForms con il codice.