Come inserire mappa su WordPress - Marco Loprete Web Agency

Inserire una mappa su WordPress è un’operazione fondamentale se hai un negozio, un’azienda, uno studio professionale. In questo modo, i tuoi potenziali clienti sapranno sempre dove trovarti. Per implementare una mappa di Google su WordPress hai a disposizione diverse alternative. In questo articolo le esamineremo tutte, a partire dall’operazione fondamentale, senza la quale non è possibile visualizzare la tua Google map sul sito, ovvero: l’attivazione di una chiave API.

Come sempre, ti invito a leggere tutto l’articolo e a lasciare un commento per ogni curiosità, richiesta, critica.

→ Se hai bisogno di realizzare il tuo sito WordPress e cerchi un professionista esperto e competente, contattami per un preventivo gratuito!

→ Hai bisogno d’aiuto? Leggi la mia guida completa per realizzare siti con WordPress!

Di cosa parliamo

La nuova API Key di Google Maps: cos’è e come ottenerla

Se provi ad inserire una mappa sul tuo sito senza la chiave API di Google Maps, ti verrà mostrata una schermata con l’errore MissingKeyMapError.

Le regole sono cambiate qualche anno fa, quando Google ha reso obbligatorio l’uso delle API key per le mappe. Facciamo un passo indietro. Cosa significa API? E’ una sigla che sta per Application Programming Interface. Si tratta di interfacce di programmazione rese disponibili dalle società che realizzano app e software per consentire agli sviluppatori di espanderne le funzionalità.

Nel caso di Google Maps, le API servono a realizzare mappe personalizzate, creare servizi di ricerca georeferenziati, sviluppare applicazioni mobile particolari ecc.

Le API Key di Google Maps sono gratuite per il 99% degli utenti, ovvero per le funzionalità di base.

Come spiega Google stesso, poiché i prezzi dei servizi dipendono dal consumo, si paga solo l’utilizzo effettivo. Ogni utente ha un credito di $ 200 sul suo account che compensa i costi di utilizzo. E’ possibile verificare l’utilizzo attuale delle API tramite la consolle di Google Cloud Platform e stimare i costi mensili con la matrice di prezzi e utilizzo.

Già, ma cos’è la Google Cloud Platform, e come si crea una chiave API? Continua a leggere!

Come ottenere una Google Maps API Key

Ecco i passi che devi seguire per generare la tua chiave API di Google Maps e inserire la tua mappa su WordPress!

Crea un account su Google Cloud Platform (o, se ne hai già uno, accedi).
Crea un progetto o selezionane uno già esistente.
Configura il tuo account di fatturazione. Questo implica l’inserimento di una carta di credito. Riceverai un addebito solo se l’utilizzo della chiave supera il credito di 200 dollari mensili di Google (che è comunque un limite alto).
Vai su Api e Servizi > Abilita api e servizi, accederai alla libreria api di Google. Dal blocco Mappe clicca su “Visualizza tutto”.
Scegli il tipo di API che t’interessa. Se devi embeddare (inserire) la mappa SENZA l’uso di un plugin, cioè direttamente, allora scegli Maps Embed API. Se userai un plugin, scegli Maps Static API.
Scelto il tipo di API, fai click su “Abilita”.
Dal menu API, seleziona l’API che hai abilitato e clicca su “Credenziali”. Troverai in questo modo la tua chiave API.
E’ importante applicare una restrizione alla propria chiave API, per fare in modo che venga adoperata solo ed esclusivamente sul proprio sito. Sempre nella sezione “Credenziali”, cliccate sul simbolo della matita accanto all’API prescelta e impostate un “Referrer HTTP”, aggiungendo, nel campo subito sotto, il dominio su cui l’API key sarà valida.

E ora che abbiamo la nostra chiave API, vediamo come inserire una mappa su WordPress. Ci sono due possibilità: con o senza un plugin. Eccole entrambe!

Inserire Google Maps in WordPress senza plugin

E’ possibile inserire una mappa di Google su un sito WordPress senza adoperare nessun plugin. Vediamo come.

Per prima cosa, bisogna andare su https://www.google.it/maps e cercare il luogo che ci interessa. Per esempio: Marco Loprete – Realizzazione siti web. Ecco la schermata che Google mostrerà:

In alto a sinistra, clicca sull’iconcina del menu ad hamburger e seleziona “Condividi o incorpora mappa”. Dal popup che si è aperto, clicca su “Incorporare una mappa”. Avrai così accesso alla schermata con il codice da copiare:

Stabilisci la dimensione della mappa (piccole, media, grande, dimensione personalizzata) agendo sul relativo menu a tendina. Poi clicca su “Copia HTML” per copiare il codice.

A questo punto, accedi al tuo pannello di controllo WordPress, apri (o crea) la pagina su cui vuoi inserire la mappa. Se stai usando il classic editor, nel campo per l’inserimento del testo clicca sulla linguetta “Testo” e incolla il codice:

Se usi l’editor blocchi Gutemberg, seleziona il blocco “HTML Personalizzato” e incolla lì il codice.

A questo punto, dovrai aggiungere nel codice del sito la tua API Key. Lo snippet che dovrai inserire ha questo aspetto:

Alcuni temi offrono, tra le loro opzioni, un campo vuoto da riempire direttamente con l’API Key. In questo modo eviterai di mettere le mani sul codice.

Google MyMaps

Google MyMaps è un servizio gratuito di Google che ti permette di personalizzare le mappe aggiungendo località multiple, annotazioni, percorsi ecc. Pui accedere da qui: https://www.google.com/intl/it/maps/about/mymaps/ e, cliccando su “+ CREA NUOVA MAPPA”, creare la tua mappa personalizzata.

Quando avrai finito, potrai condividerla sul tuo sito WordPress cliccando sul pulsante “Condividi”. Nel popup che si aprirà, dovrai cliccare su “Cambia…” e “Attivo – Pubblico sul web”, poi su “Fine”. Clicca sui tre puntini in verticale (in alto a sinistra) e vai su “Incorpora sul mio sito”. Otterrai così il codice da embeddare secondo la procedura che abbiamo visto prima.

Inserire Google Maps su WordPress con un plugin

Esistono molti plugin WordPress per Google Maps i quali possono aiutarti a inserire la mappa sul tuo sito. Vediamo alcuni di quelli più importanti!

WP Google Maps

WP Google Maps è il plugin più scaricato dal marketplace ufficiale per l’inserimento delle mappe (400.000 download).

Consente di aggiungere mappe Google a post e pagine WordPress in modo rapido e semplice grazie ad uno shortcode. E’ perfetto per mappe di pagine di contatto, percorsi, mappe che mostrano le aree di consegna e qualsiasi altro uso ti venga in mente.

Ecco alcune delle funzioni di base:

9 temi di mappa da cui scegliere
Crea o aggiungi il tuo tema per le mappe
Trascina i marker alla posizione esatta
Aggiungi un blocco mappa alla tua pagina
Google Maps Streetview supportato
Supporto per i caratteri UTF-8
Funzionalità widget
Funzionalità mappa a tutto schermo
Supporto per la localizzazione
Scegli fra quattro tipi di mappe Google: stradale, terreno, satellite e ibrida
Definisci altezza, larghezza e livello di zoom per ogni mappa
Aggiungi animazioni al tuo marker

Del plugin esiste anche una versione Pro, a pagamento, che consente di creare mappe Google personalizzate con marcatori di alta qualità contenenti posizioni, descrizioni, immagini, categorie, collegamenti e indicazioni stradali e tanto altro ancora.

SCOPRI DI PIU’

Maps Widget for Google Maps – Google Maps Builder

Maps Widget for Google Maps consente di incorporare mappe usando la Google Maps Static API. Questo significa che la mappa verrà caricata in un’unica richiesta anziché nelle oltre 20 richieste degli altri plugin. Il che, ovviamente, garantisce una certa rapidità di caricamento del sito. Significa, in pratica, che verrà caricata un’immagine statica anziché una mappa interattiva. La mappa interattiva si aprirà per un effetto popup (date un’occhiata alle demo qui).

Tra le opzioni che potrete settare con questo plugin:

Dimensioni della mappa personalizzate
Scelta tra diversi tipi di mappa Google (road map, satellite map, terrain map, hybrid map, o, nella versione PRO del plugin, un’immagine custom per risparmiare il budget mensile dell’API)
Moltissime combinazioni di colore
Livello dello zoom
Tipo di pin (immagine, colore, dimensione, label. Nella versione pro, oltre 1500 tipi di pin)
Tipologia di link (lightbox map, custom URL, oppure, nella versione PRO, mappa interattiva)
Testo sopra e sotto la mappa

E altro ancora. Maps Widget for Google Maps è un plugin leggero e semplice da usare. La API Key di Google Maps s’inserisce nelle impostazioni del plugin.

SCOPRI DI PIU’

Google Maps Easy

Google Maps Easy è l’ideale se state cercando un plugin che personalizzi le mappe di Google con i vostri marcatori e le vostre annotazioni. In particolare, con questo plugin potrete:

inserire mappe e marcatori illimitati
inserire testo, immagini, video, email, telefono nella descrizione del marker
personalizzare tutti gli aspetti della mappa
scegliere tra una serie di temi
inserire i pulsanti di condivisione sui social
inserire tab e slider
disegnare figure e percorsi sulla mappa

SCOPRI DI PIU’

Gutenberg Block For Google Maps Embed By Pantheon

Se il vostro sito WordPress adopera Gutemberg, potete adoperare questo plugin per inserire la mappa (a meno che non abbiate installato un plugin come Ultimate Addons for Gutenberg, che contiene un blocco specifico per le mappe).

Con questo plugin potrai:

scegliere le dimensioni della mappa
scegliere il livello di zoom
scegliere se mostrare una immagine statica o la mappa interattiva
scegliere il tipo di mappa da mostrare (Open Street Map, Google Maps, Bing, Mapbox)
mostrare la mappa con l’utilizzo di uno shortcode

SCOPRI DI PIU’

Mappe Google e performance del sito

Le mappe interattive possono rallentare le performance di un sito internet. Per evitare il rischio ci sono due possibilità.

Primo, anziché inserire la mappa interattiva, potete fare uno screenshot della mappa con il vostro studio/attività/sede, inserirla sul sito e linkare l’immagine alla mappa completa. E’, per certi aspetti, la cosa che fa un plugin come Maps Widget for Google Maps, di cui ti ho parlato sopra.

Secondo, puoi adoperare un plugin di lazy loading per ottimizzare il caricamento della mappa. In questo modo, la mappa non sarà caricata subito, in apertura di pagina, ma quando l’utente, scorrendola, la raggiungerà.

Tra i plugin che consentono questo caricamento differito degli iframe ci sono a3 Lazy Load o Lazy Load by WP Rocket. Ti consiglio di provarli e vedere quale si adatta meglio al tuo sito!

Bene, siamo ai saluti. Se questa guida ti è stata utile, fammelo sapere con un commento. Idem se hai domande, richieste, suggerimenti.

Se cerchi un web designer esperto per la realizzazione del tuo sito WordPress, contattami per un preventivo gratuito!