State cercando un modo per incorporare i contenuti di Google Maps nel vostro sito WordPress?
Come avviene per altre cose in WordPress, ci sono diversi modi per incorporare Google Maps sul vostro sito, a seconda del tipo di contenuto della mappa che desiderate includere.
In questo post inizieremo mostrandovi come aggiungere Google Maps in WordPress senza un plugin. Subito dopo, vi consiglieremo alcuni plugin che possono aiutarvi a incorporare Google Maps, e vi descriveremo alcuni dei vantaggi derivanti di questo approccio. Ci occuperemo anche di come utilizzare correttamente l’API di Google Maps, che ora è richiesta.
Infine, concluderemo con alcune considerazioni sulle prestazioni in relazione all’utilizzo di Google Maps su WordPress e condivideremo con voi alcune soluzioni per far sì che il caricamento del vostro sito WordPress rimanga rapido anche se dovete incorporare Google Maps.
Potete fare clic di seguito per passare direttamente a una sezione specifica oppure proseguire per leggere l’intero articolo.
- L’API di Google Maps Ora è Richiesta
- Come aggiungere Google Maps in WordPress senza un plugin
- Plugin di WordPress per Google Maps che offrono maggiore flessibilità
- Effetti sulle prestazioni di Google Maps e suggerimenti per migliorare le performance
L’API di Google Maps Ora è Richiesta
A partire dall’11 giugno 2018, per Google Maps è ora necessaria una chiave API. Se avete già implementato Google Maps sul vostro sito e non funziona più, questa potrebbe essere la ragione. O, più precisamente, vi manca la chiave API. La buona notizia è che, per il 99% di voi, dovrebbe essere ancora gratuita. Di seguito sono riportati i prezzi dell’API di Google Maps.
Google vi offre inoltre un credito periodico di $200 sul vostro account di fatturazione, ogni mese, per compensare i costi di utilizzo. Quindi, come potete vedere, a meno che non generate migliaia di richieste, l’utilizzo di Google Maps sul vostro sito non dovrebbe costarvi nulla.
Cos’altro è cambiato? Niente, ma ora dovrete fare quanto segue se desiderate utilizzare Google Maps in WordPress:
- Registrate un account di Google Cloud Platform Console e configuratelo.
- Aggiungete le vostre informazioni di fatturazione, anche se potrebbero non esservi mai addebitate delle somme.
- Aggiungete la chiave API al vostro codice da incorporare o alle impostazioni del plugin di Google Maps.
Come ottenere una chiave API di Google Maps
Di seguito sono riportati i passaggi da seguire per ottenere la chiave API di Google Maps.
Passo 1
Vai alla console di Google Cloud Platform. Se non avete ancora un account, createne uno, è gratuito.
Passo 2
Selezionate o create un progetto.
Passo 3
Configurate il vostro account di fatturazione. Anche se vi chiedono di inserire una carta di credito, non vi dovrebbe mai essere addebitata, a meno che non superate i limiti di utilizzo, che sono comunque elevati.
Passo 4
Vi sarà chiesto di scegliere uno o più prodotti. Questo dipende dal tipo di mappa che state utilizzando. Ad esempio, se state incorporando una mappa sul vostro sito WordPress senza un plugin (come mostrato nei passaggi successivi), scegliete la Google Maps Embed API.
Se utilizzate un plugin come Google Maps Widget (come illustrato nei passaggi successivi), scegliete la Google Maps Static API.
Se utilizzate un plugin o un tema di terze parti, questi dovrebbero disporre della documentazione sul tipo di distribuzione di Google Maps che utilizzano. Non preoccupatevi, potete sempre aggiungere più tipi e modificarli in seguito.
Passo 5
Fate clic su “Abilita”.
Passo 6
Fate clic su “API”, quindi, sotto “Credenziali”, vedrete la vostra chiave API.
Passo 7
Se state solo incorporando la vostra chiave API di Google Maps, questa sarà mostrata in chiaro nel codice sorgente. Pertanto dovresti evitare questo utilizzo, altrimenti qualcuno potrebbe usare la vostra chiave API sul proprio sito o progetto WordPress e aumentare il vostro utilizzo.
Per farlo, fate semplicemente clic sul nome della vostra chiave API e vi sarà permesso di aggiungere una restrizione. Per il vostro sito WordPress, potrebbe bastare aggiungere semplicemente un referrer HTTP. Ad esempio https://yourdomain.com/*. Ciò farà in modo che siano effettuate solo chiamate sul vostro sito web.
Come aggiungere Google Maps in WordPress senza un plugin
Se desiderate solo incorporare una semplice mappa e non avete bisogno di funzionalità più dettagliate, come marker di posizione personalizzati o altre annotazioni, potete incorporare Google Maps senza un plugin, utilizzando il normale sito di Google Maps che utilizzate tutti i giorni.
Ecco come funziona…
Passo 1: copiate il codice da incorporare di Google Maps
Per iniziare, utilizzate il sito web di Google Maps per creare la mappa che desiderate incorporare.
Ad esempio, se desiderate incorporare un marker di luogo, aprite quel luogo in Google Maps. Oppure, se desiderate incorporare le indicazioni stradali, aprite le indicazioni stradali in Google Maps.
Una volta che avete la mappa da incorporare, fate clic sul menu ad hamburger nell’angolo in alto a sinistra:
Nell’elenco delle voci di menu, selezionate l’opzione per Condividi o incorpora mappa:
Si aprirà un popup Condividi. In questo popup, fate clic sulla scheda Incorporare una mappa.
Quindi potrete scegliere la dimensione desiderata utilizzando il menu a discesa. Per la maggior parte dei siti WordPress, la dimensione predefinita va bene, ma è possibile ingrandire o ridurre la mappa se necessario.
Quando avete fatto, fate clic sul pulsante Copia HTML per copiare il codice da incorporare:
Dovrete quindi aggiungere la vostra chiave API nel codice. Il vostro codice dovrebbe assomigliare a questo:
<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY¶meters allowfullscreen></iframe>
Passo 2: Aggiungere il Codice da Incorporare di Google Maps al Sito WordPress
Ora, tutto ciò che dovete fare è aggiungere il codice embed al vostro sito WordPress nel post o nella pagina in cui desideri incorporare la mappa.
Se utilizzate il nuovo editor a blocchi di WordPress Gutenberg, rilasciato con WordPress 5.0, potete farlo aggiungendo un blocco HTML personalizzato e incollando il codice da incorporare nel blocco. Non dimenticate di aggiungere la vostra chiave API.
Potete vedere in anteprima come apparirà la vostra mappa facendo clic sul pulsante Anteprima sopra il blocco.
Se state ancora utilizzando il classico editor TinyMCE, potete aggiungere il codice di Google Maps aprendo la scheda Testo e incollando il codice all’interno:
Una volta aggiunto il codice, potete tornare alla scheda Visuale per vedere un’anteprima dal vivo della vostra mappa.
E questo è tutto! Avete appena imparato ad aggiungere Google Maps in WordPress senza un plugin.
Utilizzare Google My Maps per Incorporare Mappe Più Complicate Senza Plugin
Se volete essere più creativi con cose come marker di località multiple, annotazioni personalizzate, ecc., potete sempre farlo senza la necessità di un plugin, con il servizio My Maps di Google.
My Maps è uno strumento ufficiale di Google che vi consente di creare e condividere le vostre mappe personalizzate. Con questo strumento, potreste creare qualcosa come quello che vedete nell’esempio qui sotto, con molti marker e informazioni personalizzate, visualizzate quando un utente fa clic su un marker:
Ecco come utilizzarlo per aggiungere Google Maps a WordPress.
Passo 1: Create la Vostra Mappa in Google My Maps
Per iniziare, andate su Google My Maps e create una nuova mappa. Da lì, potete utilizzare l’interfaccia del map builder per generare la vostra mappa:
Anche se non lo analizzeremo in modo troppo dettagliato, questa interfaccia vi consente di creare mappe piuttosto creative. Per un occhiata più da vicino, questo articolo della guida di Google descrive molte delle funzionalità più importanti.
Passo 2: Generare il Codice da Incorporare
Una volta che avete finito di costruire la vostra mappa, dovete generare il codice da incorporare.
Prima di poter ottenere quel codice, però, dovete prima rendere pubblica la vostra mappa. Per farlo, fate clic sul pulsante Condividi. Quindi su Cambia … nel popup:
Quindi, selezionate Attivo – Pubblico sul Web e fate clic su Salva:
Una volta fatto, fate clic sul menu a discesa vicino al titolo della mappa e selezionate Incorpora sul mio sito per generare il codice da incorporare:
Questo aprirà un popup con il codice che dovete copiare. Non dimenticate di aggiungere la vostra chiave API.
Passo 3: Aggiungere il Codice da Incorporare al Sito WordPress
Ora potete aggiungere il codice da incorporare al vostro sito WordPress proprio come fareste con il codice prodotto dal tradizionale sito web di Google Maps.
Se non siete sicuro di come fare, fate clic qui per passare all’altra sezione del tutorial.
Utilizzare Invece un Plugin WordPress per Google Maps
Oltre ai metodi manuali di cui sopra, ci sono anche un sacco di plugin di WordPress per Google Maps che possono aiutarvi a incorporare le mappe sul vostro sito.
Ci sono alcuni motivi per cui potreste considerare uno di questi plugin rispetto ai metodi manuali:
- Vi permettono di creare mappe più complicate con una semplice interfaccia.
- Potete fare tutto senza dover lasciare la vostra dashboard di WordPress.
- Alcuni di questi plugin si collegano a WordPress. Ad esempio, potreste essere in grado di collegare i marker delle mappe ai post di WordPress.
- Alcuni plugin possono aiutarvi a ottimizzare Google Maps dal punto di vista delle prestazioni (maggiori informazioni su questo punto più avanti).
Per tutti questi plugin, dovrete generare la vostra chiave API di Google Maps prima di poter iniziare a incorporare le mappe. Questo tutorial vi mostra come farlo.
Google Maps Widget
Google Maps Widget è un semplice plugin per Google Maps che vi consente di incorporare una mappa utilizzando la Google Maps Static API, che fornisce un approccio più performante incorporando un’immagine statica piuttosto che una mappa interattiva (spiegheremo di più su questo punto nella sezione successiva).
È un’ottima soluzione se cercate qualcosa di semplice e leggero. Una volta attivato, dovrete prendere la vostra Google Maps API key e inserirla nelle impostazioni del plugin. Potete aggiungere una mappa di Google in qualsiasi area widget del vostro sito. I visitatori potranno aprire una versione interattiva più grande della mappa in una lightbox:
Potete anche utilizzare subito una mappa interattiva se lo desiderate, e la versione Pro vi consente di incorporare le mappe ovunque nel vostro sito con uno shortcode.
Google Maps Easy
Google Maps Easy vi aiuta a creare mappe personalizzate con i vostri marcatori e le vostre annotazioni.
Quando aggiungete dei marcatori, avete la possibilità di caricare le vostre icone personalizzate, includere testo e immagini nella descrizione del marker e molto altro. Potete anche controllare il funzionamento della vostra mappa, ad esempio scegliere se consentire o meno agli utenti di zoomare:
Una volta creata la vostra mappa, potete incorporarla usando uno shortcode o una funzione PHP.
Intergeo
Intergeo è un’altra opzione popolare che vi consente di creare le vostre mappe con marker personalizzati e avere il controllo sulle funzionalità della mappa.
Una volta installato e attivato il plugin, sarete in grado di creare le vostre mappe direttamente dalla dashboard di WordPress:
Quindi, potete incorporarle ovunque nel vostro sito utilizzando uno shortcode.
Gutenberg Block For Google Maps Embed
Gutenberg Block For Google Maps Embed è un semplice plugin che aggiunge un blocco dedicato di Google Maps al nuovo editor a blocchi di WordPress, Gutenberg.
Con questo blocco, potete incorporare qualsiasi indirizzo e anche scegliere:
- Dimensioni
- Livello di zoom
- Mappa interattiva e mappa statica (anche in questo caso il secondo metodo favorisce le prestazioni)
Non vi permetterà di creare le vostre mappe personalizzate, ma è una comoda soluzione se utilizzate il nuovo editor a blocchi e volete solo un modo semplice per inserire alcune semplici mappe.
Google Maps Può Rallentare il Vostro Sito WordPress – Non Lasciateglielo Fare
Sebbene Google Maps vi consenta di incorporare una moltitudine di funzionalità interessanti sul vostro sito con le sue mappe interattive, c’è un compromesso tra funzionalità e prestazioni perché è necessario caricare un numero elevato di script per alimentare tutte le funzionalità interattive.
Per farla breve, l’integrazione di mappe interattive può rallentare il vostro sito.
Ci sono alcuni modi in cui potete evitarlo.
Innanzitutto, se non avete bisogno che le persone siano in grado di navigare in modo interattivo sulla mappa del vostro sito web, un modo semplice per accelerare le cose senza strumenti di terze parti è:
- Fate uno screenshot della mappa da utilizzare sul vostro sito
- Collegate lo screenshot alla mappa sul sito di Google Maps, oppure aprite un popup lightbox con la mappa interattiva quando un utente fa clic.
In questo modo, il vostro sito carica solo un’immagine normale, non tutti gli script associati a Google Maps.
Invece di farlo manualmente, potete anche utilizzare il plugin gratuito AWEOS Google Maps iframe load per click. Questo plugin sostituisce automaticamente gli incorporamenti di Google Maps con una generica immagine segnaposto. Quindi, se un utente fa clic sul pulsante Carica mappa, caricherà l’incorporamento completo di Google Maps:
Oppure potete anche utilizzare l’API statica di Google Maps, che restituisce un’immagine normale senza alcun codice JavaScript. Alcuni plugin di Google Maps, tra cui Google Maps Widget e Gutenberg Block For Google Maps Embed, vi consentono di utilizzare l’API statica per creare le vostre mappe.
Tuttavia, ci rendiamo conto che a volte questo approccio statico non si adatta, e molti preferiscono incorporare subito l’esperienza interattiva di Google Maps.
In questo caso, un altro modo per accelerare Google Maps è utilizzare il lazy loading. Con il caricamento ritardato, il vostro sito aspetterà a caricare qualsiasi incorporazione di Google Maps below-the-fold fino a quando i visitatori inizieranno a scorrere la pagina verso il basso. Ciò consente di mantenere veloci tempi di caricamento della pagina iniziale, consentendo comunque di incorporare i contenuti interattivi di Google Maps.
Abbiamo già scritto su come caricare immagini e video a caricamento differito ed è la stessa cosa per Google Maps.
Ci sono alcuni plugin che vi possono aiutare in questo. Ad esempio, il plugin a3 Lazy Load vi consente di differire il caricamento del codice incorporato negli iframe, tra cui Google Maps:
Altre opzioni sono:
Riepilogo
Se desiderate solo incorporare una semplice mappa sul vostro sito, potete aggiungere Google Maps a WordPress senza un plugin utilizzando la funzionalità nativa del codice da incorporare. In alternativa, potete utilizzare lo strumento di Google My Maps per creare la vostra mappa personalizzata e incorporarla.
Oltre a questi metodi manuali, ci sono anche molti plugin di WordPressper Google Maps che possono offrirvi un grande controllo senza farvi lasciare la vostra dashboard di WordPress.
Indipendentemente dal metodo scelto, fate attenzione all’impatto sulle prestazioni dell’utilizzo di Google Maps. Cercate di utilizzare Google Maps solo quando è assolutamente necessario e considerate le soluzioni tattiche come le immagini segnaposto o il caricamento differito per ridurre l’effetto negativo sulle prestazioni.
Avete altre domande sull’utilizzo di Google Maps in WordPress? Scrivetele nei commenti!
Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.
Buonasera,
ho seguito la guida ed ho notato che ormai Google richiede l’inserimento dei dati di Fatturazione per poter utilizzare le API, viene fornito un credito di 300 euro che ovviamente si erode in base alle visite ricevute sul sito.
Dopo aver completato tutti i passaggi e trovato la chiave API ho cercato di inserirla nel codice HTML di Google Maps per evitare l’uso del plugin ma sinceramente non ho capito dalle immagini in quale punto copiarlo. Potreste essere più chiari se possibile? Grazie
Grazie per il tuo commento!
È al punto 1. La chiave API deve essere inclusa nel codice dell’iframe.
Se stai utilizzando l’editor classico in WordPress, incolla l’iframe nell’editor di testo. Se stai utilizzando Gutenberg, incollalo in un blocco HTML personalizzato.
Il mio problema è più a basso livello. Devo creare dei CPT con un campo mappa. Mentre la mappa è ben visualizzata nel sito, inserendo in function.php del tema child la funziona che passa la chiave, nel backend dove devo editare il CPT restituisce un errore di URL non autorizzato nella console JavaScript.