Quante volte abbiamo avuto la necessità di inserire una mappa su una delle nostre pagine web?

Per quanto mi riguarda, le prime volte, ho trovato non poche difficoltà a risolvere questo problema. Per questo ho pensato che fosse utile condividere l’esperienza da me fatta per aiutare chiunque si approcci a questo argomento per la prima volta.

QUALI STEP SEGUIRE?

Gli step da seguire sono essenzialmente due:
1) Creare un account google (se l’abbiamo già ancora meglio) che ci permetta di accedere alla Goggle Console (https://console.cloud.google.com/) per attivare le Api Key necessarie alla visualizzazione della mappa sul nostro sito (poichè argomento più complesso ho preferito affrontare la cosa in questo post > Creare Google Api).
2) Attivare le Api Key su DIVI BUILDER e proseguire con la costruzione della pagina con mappa.

I MODULI MAPPA SU DIVI Chi ha avuto modo di utilizzare il tema DIVI per WordPress di Elegant Themes con il suo plugin DIVI Builder sa bene che le potenzialità di questo page builder sono veramente enormi grazie all’interfaccia intuitiva e la flessibilità dei suoi strumenti. La casa californiana produttrice del tema offre periodi di prova del Builder oppure la possibilità di acquisire la licenza d’uso per un periodo annuale o eventualmente offre la soluzione “a vita” che permette di usarlo senza limitazioni nel tempo. Nel caso vi interessi verificare le varie soluzioni di acquisto potete controllare questo link. Immagino però, che se siete interessati a questo articolo sarete sicuramente già in possesso di tutto ciò. I moduli a disposizione per comporre la nostra pagina sono numerosi e fra tutti possiamo trovarne uno chiamato appunto MAPPA Dopo  avere installato il tema DIVI su WordPress andremo ad inserire la Api Key di Google andando su  Divi > Opzioni Tema

e poi inseriremo la API Key di Google precedentemente ottenuta attraverso il nostro account, come da immagine qui sotto

…senza dimenticarsi di salvare i cambiamenti.

Usciamo dalle impostazioni DIVI e andiamo sulla bacheca di WordPress > Pagine > Aggiungi Pagina e nominatela. Per continuare nell’elaborazione della pagina quindi selezionate >Usa il Builder

Nella schermata successiva selezionate > Costruisci sul front-end, cioè potrete continuare a costruire la vostra pagina in modo visuale.

Seleziona >Inizia a costruire

In automatico sarà creata una sezione e vi sarà richiesto di inserire una riga. Scegliete una riga semplice

Selezionata la riga vi verrà richiesto a questo punto di >Inserire Modulo e usando la form di ricerca potremo richiamarlo come da immagine sotto.
Nel modulo avremo a disposizione anche diverse opzioni per l’impostazione dei Contenuti, il Design e le impostazioni Avanzate

Come si può notare sotto la voce > Mappa abbiamo già presente la chiave API che avevamo precedentemente inserito su > Opzioni Tema mentre subito sotto potremo inserire alla voce > Indirizzo Centrale della Mappa l’indirizzo che a noi interessa sia visualizzato.

Selezioniamo >TROVA. A questo punto dovremmo poter visualizzare nella finestra in basso la mappa richiesta.

N.B.: Nel caso non dovesse comparire nessun risultato (nessuna mappa visibile) provate ad inserire lo coordinate Gps invece dell’indirizzo. In questo caso vi può essere utile andare a questo link https://www.mapsdirections.info/it/coordinate-google-map.html dove potrete trovare le coordinate corrette inserendo l’indirizzo che ci interessa. Questa operazione dovrebbe sbloccare la visualizzazione. Se doveste avere ancora difficoltà nella visualizzazione potrebbero non essere state abilitate correttamente le API durante la creazione in Google Cloud Platform (vedi Maps JavaScript API o Geocode API). Per ulteriori approfondimenti vi rimando al post > Creare Google API . Siamo quasi alla fine del nostro lavoro. Per completare e rendere più efficace la visualizzazione potremmo aggiungere anche PIN o Segnalini

Aggiungiamo > Nuovo Elemento Pin  ed inseriamo i dati che vogliamo siano visualizzati

Questo è il risultato .

Inoltre possiamo personalizzare ulteriormente la nostra mappa andando sull’opzione > Design e attivare ulteriori controlli come potete vedere.nella schermata di esempio qui sotto.

Siamo arrivati al termine di questo articolo. Mi auguro che queste mie info possano essere utili a chi come me si è trovato ad affrontare questa problematica.
Lasciatemi un commento se volete.

Auguro a tutti buon lavoro e a presto con un nuovo post.
Giovanni