Integrare Google Maps su WordPress

Integrare Google Maps su WordPress è molto utile in tutte quelle occasioni in cui si ha un indirizzo da segnalare ai visitatori del sito web. Generalmente viene utilizzata nella pagina contatti, ma ovviamente, possiamo integrarla dove meglio crediamo.

Esistono più modi per integrare Google Maps sul tuo sito web ed in questa guida ti insegnerò a farlo sia tramite un plugin di WordPress, ma anche utilizzando un iframe, in modo da avere la possibilità di decidere quale metodo utilizzare.

Piccola nota: molti temi premium (come ad esempio Enfold) integrano, nel proprio page builder, il modulo per inserire la mappa di Google in modo semplice e veloce. Fare quindi riferimento alla documentazione del tema per una corretta implementazione.

Integrare Google Maps su WordPress tramite plugin

Inserire una mappa sul sito tramite un plugin è sicuramente il metodo più semplice e non richiede nessuna competenza particolare. Quindi, se non sei a tuo agio nell’inserire codice, puoi utilizzare uno dei tanti plugin presenti nella repository di WordPress.

WP Google Maps

Un plugin molto completo per avere le mappe di Google su WordPress è sicuramente WP Google Maps. Questo plugin attualmente è installato su 400 mila siti in WordPress ed è uno strumento davvero potente in quanto permette di:

• Creare una mappa che si adatta ai vari dispositivi quali smartphone, tablet e pc.
• Aggiungere tutti i i punti di interesse (segnaposto) che vogliamo all’interno della mappa
• Localizzare i negozi della propria attività, chiamata anche store locator.

Permette inoltre di personalizzare l’aspetto estetico della mappa, in modo da renderla unica e in stile con il resto del sito web. La versione gratuita del plugin ci limita ad una sola mappa, quindi per crearne diverse ed avere anche più opzioni di personalizzazione, dovremo acquistare la versione Pro a 39,99$.

Ma andiamo ora a vedere come configurare il plugin affinché ci permetta di creare la nostra mappa su WordPress.

Google Maps su WordPress Chiave API

Per prima cosa dirigiamoci su “Mappe“, che sarà disponibile nel menu a sinistra di WordPress non appena avremo installato il plugin. A questo punto ci verrà chiesto di inserire l’API di Google Maps. Per crearla, andiamo nel pannello sviluppatori di Google a questo indirizzo.

Arrivati qui, se non abbiamo nessun progetto esistente, dovremo registrare un nuovo progetto semplicemente accettando i termini di servizio e premendo su “Accetta e Continua“.

Se abbiamo altri progetti su Google, arrivati nel pannello di sviluppatori usiamo il menu a tendina per creare un nuovo progetto chiamandolo, ad esempio, “mappa del sito“, e successivamente clicchiamo su continua.

Dopo aver creato il progetto sarà subito disponibile la creazione della chiave API. Scegliamo un nome e dirigiamoci nella sezione più in basso “Restrizioni dell’applicazione” e, selezionando “Referrer http (siti web)“, inseriamo il link del nostro sito web.
Questo servirà ad impedire l’uso improprio della chiave da parte di siti terzi.

Infine, clicchiamo su Crea ed in questo modo verrà generata la chiave API che potremo inserire nel pannello di WP Google Maps.

Creare una mappa con WP Google Maps

Ora che abbiamo creato la nostra chiave API, potremo creare la nostra mappa. Inserendo la chiave nel pannello di WP Google Maps verrà creata in automatico una mappa “My first map“. Clicchiamo su “modifica” per personalizzarla con l’indirizzo e altre impostazioni.

Il pannello è diviso in tab: impostazioni generali, themes, indicazioni, localizzatore di negozi, impostazioni avanzate, opzioni elenco punti di interesse e pro upgrade. Ogni tab è facilmente configurabile grazie alla traduzione in italiano del pannello e tutto quello che non può essere realizzato con la versione free viene facilmente segnalato da un avviso.

Scorrendo la pagina in basso avremo la possibilità di inserire i vari punti di interesse, ovvero l’indirizzo della sede oppure le coordinate GPS.

Una volta terminate le modifiche clicchiamo su “Salva Mappa“.
Ora potremo integrare la mappa in due modi: copiando lo shortcode presente in alto nella pagina e incollandolo nelle pagine dove vogliamo visualizzarlo, oppure tramite il blocco Gutenberg WP Google Maps all’interno degli articoli o pagine.

Integrare Google Maps su WordPress tramite iframe

Innanzitutto andiamo su Google Maps e cerchiamo l’indirizzo esatto della mappa che vogliamo far apparire. Successivamente, nel menu a sinistra (sotto il meteo), avremo diverse opzioni tra le quali il tasto “Condividi“.

Si aprirà una finestra centrale di condivisione, con due tab: inviare un link e incorporare una mappa. Proprio tramite quest’ultima potremo copiare il codice iframe html da inserire dove vogliamo sul nostro sito, senza l’ausilio della chiave API.

Basterà infatti incollare l’iframe usando un blocco “HTML personalizzato” all’interno di pagine, articoli o nei widget. Sarà inoltre possibile, tramite il menu a tendina, scegliere le dimensioni della mappa tra: piccole, medie, grandi o dimensioni personalizzate (in pixel).

Utilizzando questo metodo per integrare Google Maps su WordPress verranno utilizzati gli strumenti classici delle mappe Google, ovvero tutti i pulsanti presenti anche sul sito (zoom, indicazioni, ecc…)

Conclusioni

Abbiamo visto quanto sia semplice integrare Google Maps su WordPress sia tramite codice iframe, che con l’uso di un plugin. La scelta fra i due metodi dipende dall’uso che bisogna fare della mappa.

Se vogliamo maggiore personalizzazione e funzioni più avanzate, la scelta deve ricadere sull’uso di un plugin, mentre se abbiamo solo bisogno di una mappa semplice, l’utilizzo del codice iframe è il più veloce.

Diteci nei commenti quale metodo state utilizzando per integrare Google Maps sul vostro sito WordPress, e se è stato facile da eseguire 🙂