Aggiungere una mappa al tuo sito WordPress è un’operazione da cinque minuti. Aiuta a costruire fiducia, rafforza la SEO locale e rende più facile per i clienti trovarti e acquistare da te. Tuttavia, assicurarsi che venga visualizzata correttamente e che abbia le funzionalità di cui hai bisogno può richiedere ore. E se dimentichi di considerare gli utenti mobile, potresti non accorgerti che la mappa risulta tagliata sugli schermi più piccoli.
Questa guida ti accompagna attraverso tre opzioni per inserire Google Maps in WordPress: un iFrame nativo, un plug-in per mappe e un widget gratuito. Analizzeremo anche problemi e compromessi, così potrai decidere quale soluzione è la migliore per te.
Tre opzioni per incorporare una mappa in WordPress
| Method | API key required | Cost | Mobile-responsive | Multi-pin support | Setup time |
|---|---|---|---|---|---|
|
iFrame nativo |
No |
Gratuito |
No; larghezza/altezza fisse |
No |
Circa 5 minuti |
|
Plug-in WordPress |
Sì; gratuito fino a 10.000 caricamenti mappa/mese |
Gratuito per le funzionalità base; a pagamento per le funzionalità avanzate |
Dipende dal plug-in |
Sì; spesso a pagamento |
Circa 15–25 minuti |
|
Widget Jotform Google Maps |
Sì; gratuito fino a 10.000 caricamenti mappa/mese |
Widget gratuito; include funzionalità avanzate |
Sì |
Sì; gratuito |
Circa 15 minuti |
Opzione 1: Usare un iFrame nativo di Google Maps
L’opzione iFrame di Google Maps è il modo più semplice e veloce per inserire una mappa sul tuo sito web. Cerchi la tua attività su Google Maps, fai clic su Condividi, copi il codice e lo incolli in una pagina WordPress. Qui di seguito trovi una guida passo passo per renderla operativa in pochi minuti.
La semplicità finisce per essere essa stessa un limite. Non puoi personalizzare l’aspetto della mappa, aggiungere più segnaposto o visualizzare informazioni aggiuntive rispetto alla vista predefinita. Inoltre, dovrai sperimentare con le dimensioni della mappa e i layout delle pagine WordPress per assicurarti che sia utilizzabile anche su dispositivi mobile.
Come incorporare un iFrame di Google Maps
Prima di iniziare, registra la tua attività sulla piattaforma Profilo dell’attività su Google. Questo ti permette di mostrare tutte le informazioni su Google Maps, inclusi orari di apertura, recensioni o il menu del tuo ristorante. Se stai semplicemente indicando un indirizzo che non ti appartiene o un punto di riferimento, passa direttamente al primo passaggio.
Ottieni il codice di incorporamento da Google Maps
- Vai su google.com/maps e cerca il nome della tua attività o l’indirizzo.
- Verifica di aver selezionato il segnaposto corretto controllando i dettagli dell’attività sul lato sinistro dello schermo.
- Fai clic su Condividi.
- Sullo schermo compare un popup. Fai clic sulla scheda Incorpora una mappa.
- Compare un’anteprima di come apparirà la mappa sul tuo sito web. Per impostazione predefinita è impostata su dimensione media; puoi scegliere di visualizzare una mappa piccola o grande, oppure selezionare una dimensione personalizzata utilizzando il menu a discesa in alto a sinistra.
- Dopo aver selezionato la dimensione, fai clic su Copia HTML. In questo modo il codice iFrame viene copiato negli appunti.
Incorporarlo in WordPress (Editor a blocchi/Gutenberg)
- In WordPress, apri la pagina o l’articolo in cui vuoi inserire la mappa.
- Fai clic sull’icona + per aggiungere un blocco, digita HTML per filtrare e fai clic su HTML personalizzato per aggiungere il blocco alla pagina.
- Nel nuovo blocco, fai clic su Modifica HTML.
- Incolla il codice iFrame nel popup. L’anteprima viene visualizzata sul lato destro. Fai clic su Aggiorna per terminare.
- La pagina ora mostra la mappa iFrame incorporata. Fai clic su Pubblica o Salva per renderla visibile sul tuo sito web, quindi visualizza la pagina per vedere come appare.
Se questa procedura non corrisponde al modo in cui modifichi le pagine in WordPress, scopri come aggiungere codice HTML utilizzando uno di questi editor:
Opzione 2: Installare un plug-in WordPress dedicato per le mappe
Rispetto all’Opzione 1, un plug-in WordPress dedicato offre maggiore personalizzazione e funzionalità. Lo installi sul tuo sito come qualsiasi altro plug-in, crei e incolli la tua chiave API di Google Maps nelle impostazioni, quindi aggiungi l’elemento mappa a una pagina.
Questa opzione aggiunge un po’ di complessità. Ottenere la chiave API di Google Maps richiede la creazione di un account su Google Cloud Platform, la configurazione di un account di fatturazione e il completamento di una procedura tecnica. Inoltre, i plug-in per le mappe funzionano con un modello freemium: offrono un buon piano gratuito con funzionalità base, ma riservano le funzionalità migliori a una licenza una tantum o a un abbonamento annuale.
Stai aggiungendo un nuovo plug-in, quindi testa la velocità del tuo sito web dopo aver completato la configurazione. Se il tuo sito è ospitato su un piano a basso costo, troppi plug-in possono rallentare notevolmente il tutto, compromettendo l’esperienza utente e potenzialmente spingendo i visitatori ad abbandonare il sito.
Il corretto funzionamento della mappa sui dispositivi mobile dipende dal plug-in e da come lo configuri. Ad esempio, WP Go Maps consiglia di impostare valori specifici di altezza e larghezza per evitare una visualizzazione compressa.
Come configurare un plug-in WordPress per le mappe
Per questo esempio, utilizzerò uno dei plug-in Google Maps per WordPress più popolari, WP Go Maps.
Configurare WP Go Maps
- Installa e attiva WP Go Maps.
- Fai clic su Salta introduzione per completare la configurazione.
- Fai clic su Impostazioni nel menu laterale sinistro.
- Nella scheda Generale, seleziona Google Maps come motore di mappe.
Ottenere la chiave API di Google Maps
Per recuperare i dati della mappa dalla piattaforma di Google, devi prima registrare un account per ottenere la tua chiave API.
- Vai al sito web di Google Maps Platform e crea un account.
- Verrai indirizzato a una procedura di configurazione in Google Cloud Platform. Crea un nuovo account di fatturazione impostando un nome, il paese e la valuta.
- Aggiungi le tue informazioni di contatto e il metodo di pagamento. Al termine, fai clic sul pulsante Invia e attiva la fatturazione.
Con questa opzione, ottieni 10.000 caricamenti gratuiti della mappa al mese; se superi tale limite, il costo è di 7 $ ogni 1.000 caricamenti. Se rimani sotto la soglia, la tua carta non viene mai addebitata, ma l’account di fatturazione è comunque obbligatorio. (A marzo 2025, Google ha sostituito il vecchio credito mensile di 200 $ con un’indennità gratuita separata per ogni API; molti tutorial più datati citano ancora questo credito, ma non esiste più.)
- Google ti porrà alcune domande su come intendi utilizzare il servizio Maps. Rispondi e fai clic su Invia.
- Fai clic su Chiavi e credenziali nel menu laterale sinistro.
- Fai clic sul menu a discesa Crea credenziali, quindi su Chiave API.
- Nella finestra modale che appare, puoi impostare il nome e i permessi della tua nuova chiave API. Non è necessario modificare queste impostazioni; scorri fino in fondo e fai clic su Crea.
- Copia la chiave API.
È importante limitare l’accesso alla tua chiave prima che il sito vada online. Una chiave senza restrizioni nel codice sorgente della tua pagina può essere copiata e utilizzata per far lievitare i tuoi costi. Segui le best practice di Google per le chiavi API per vincolarla al tuo dominio.
Completare la configurazione del plug-in in WordPress
- Torna alla pagina delle impostazioni del plug-in WP Go Maps nella tua installazione WordPress e incolla la chiave API nel campo Chiave API di Google Maps. Fai clic sul pulsante Salva impostazioni dopo averlo fatto.
- Fai clic su Mappe nel menu laterale sinistro.
- Il plug-in ha già creato la prima mappa per te. Fai clic sul pulsante Modifica per visualizzarla.
- Qui puoi configurare come la mappa verrà visualizzata sul tuo sito web. Fai clic sulla scheda Segnaposto per iniziare ad aggiungere la tua attività.
- Fai clic sul menu con i tre puntini ed elimina il segnaposto predefinito.
- Fai clic su Aggiungi segnaposto in alto.
- Cerca l’indirizzo della tua attività e selezionalo quando appare nell’elenco.
- Fai clic sul pulsante Aggiungi segnaposto per completare l’operazione.
- La tua attività è ora contrassegnata sulla mappa. Puoi personalizzare il livello di zoom e altre impostazioni visive tornando indietro e facendo clic sul pulsante Impostazioni. Ricorda di fare clic su Salva mappa nella parte inferiore dello schermo quando hai finito.
- Quando sei pronto a inserire la mappa in una pagina del tuo sito web, fai clic sul pulsante Ottieni shortcode in basso a sinistra. Lo shortcode verrà copiato negli appunti.
- Vai alla pagina in cui vuoi aggiungere la mappa, fai clic per inserire un nuovo blocco e digita Shortcode per filtrare le opzioni. Fai clic su di esso quando appare.
- Incolla lo shortcode nel campo di input e fai clic su Pubblica o Salva.
- Quando visiti la pagina, la mappa mostra il tuo segnaposto con le impostazioni che hai selezionato.
Opzione 3: Aggiungere un widget Google Maps gratuito e personalizzabile (consigliato)
Il widget Google Maps di Jotform è una mappa gratuita e completamente personalizzabile che non richiede l’installazione di un plug-in né il pagamento di una licenza. Con esso puoi
- Aggiungere una o più posizioni che vengono visualizzate sulla stessa mappa.
- Scegliere la visualizzazione della mappa, inclusa la mappa stradale o satellitare.
- Adattare un tema chiaro o scuro, con controllo del raggio degli angoli per i riquadri.
- Impostare le dimensioni, il layout e il livello di zoom della mappa.
Rispetto agli iFrame nativi, è personalizzabile, consente di inserire più segnaposto sulla stessa mappa ed è responsive fin da subito. Rispetto a un plug-in, non appesantisce il tuo sito web e non richiede un piano a pagamento per sbloccare tutte le sue funzionalità.
Nonostante questi vantaggi, il widget Google Maps di Jotform richiede comunque una chiave API di Google Maps. Dovrai seguire i passaggi di configurazione e creare un account di fatturazione con Google.
Come aggiungere il widget Google Maps di Jotform al tuo sito web
- Visita la pagina del widget Google Maps di Jotform. Nella maggior parte dei casi, lo strumento di configurazione si carica automaticamente; in caso contrario, fai clic su Crea nuovo widget per sito web per iniziare.
- Segui questa guida su come ottenere la tua chiave API di Google Maps. Copre tutti i passaggi descritti nell’Opzione 2, oltre a come limitare l’accesso alla tua chiave per mantenerla al sicuro. (Ricorda che Google Maps consente 10.000 caricamenti gratuiti della mappa ogni mese. Ogni 1.000 caricamenti successivi costano 7 $.) Una volta terminato, incolla la tua chiave API di Google Maps nel campo di input.
- Regola le impostazioni generali a tuo piacimento. Queste includono l’aspetto della mappa e il numero di posizioni che vuoi aggiungere. Le schermate qui mostrano gli uffici di Jotform a San Francisco e in Canada per illustrare una mappa con più segnaposto, ma puoi aggiungere una singola posizione o quante ne desideri. Fai clic su Continua quando hai finito.
- Modifica le impostazioni di stile come tema, carattere o CSS personalizzato. Fai clic su Continua quando hai finito.
- Personalizza il layout e le funzionalità extra in quest’ultimo passaggio. Fai clic su Provalo gratuitamente sul tuo sito web quando sei pronto.
- Registrati per un account Jotform gratuito o accedi a uno esistente. Il codice di incorporamento appare dopo aver completato l’accesso. Fai clic su Copia codice.
- Aggiungi il codice di incorporamento alla tua pagina con un blocco HTML personalizzato, seguendo i passaggi 7–11 dell’Opzione 1: inserisci il blocco, incolla il codice, quindi fai clic su Pubblica o Salva.
- Apri la pagina sul tuo telefono. A differenza dell’iFrame nativo dell’Opzione 1, il widget si ridimensiona automaticamente per adattarsi allo schermo, quindi la mappa che risultava tagliata su mobile in quel caso qui viene visualizzata per intero.
Potenzia il tuo sito WordPress con widget intelligenti e serverless
Integrare funzionalità intelligenti nel tuo sito web di solito significa pagare nuovi plug-in o lottare con il codice. Jotform ti aiuta a evitare tutto questo: insieme al widget Google Maps, la directory dei widget per siti web di Jotform offre oltre 150 widget gratuiti e senza codice, configurabili semplicemente incollando un semplice snippet HTML sul tuo sito web.
Queste opzioni si abbinano bene al widget Maps:
- Widget Orari di apertura: Questo widget mostra gli orari di apertura, incluso uno stato in tempo reale di aperto o chiuso che puoi posizionare accanto alla tua mappa, così i visitatori che ti trovano sulla mappa sanno immediatamente se sei aperto. Non è richiesta alcuna chiave API.
- Widget Prenotazione appuntamenti: Aggiungi una funzionalità di prenotazione al tuo sito web in modo che le persone possano fissare un appuntamento con te. Questo widget supporta l’aggiunta di disponibilità, l’elenco dei tipi di servizio con durata e prezzi, e l’accettazione di prenotazioni senza bisogno di uno strumento aggiuntivo.
- Widget FAQ: Questo widget elenca le risposte alle domande frequenti in un accordion con funzione di ricerca. Fare lo stesso in WordPress è semplice, ma ottenere l’esperienza curata che questo widget offre significherebbe mettere mano al codice o installare l’ennesimo plug-in.
Se hai un piano di hosting WordPress base, i plug-in consumano risorse essenziali del server, rallentando il tuo sito web e offrendo un’esperienza utente scadente ai tuoi visitatori. I widget di Jotform funzionano sull’infrastruttura di Jotform, quindi il carico non grava sul tuo sito web. Questo libera risorse del server, rendendo il tuo sito web più veloce e facile da usare.
Vuoi portare il tuo sito WordPress al livello successivo? Dai un’occhiata a
- La nostra guida Come usare WordPress per imparare a costruire un sito web professionale senza investire in un corso di web design
- L’integrazione WordPress di Jotform, che semplifica la raccolta dati con automazione, pagamenti e funzionalità avanzate in un’unica piattaforma
Domande frequenti
Sì, può rallentare il tuo sito web. Una mappa interattiva di Google carica una grande quantità di JavaScript, da 100 KB a 2 MB. In un test indipendente, un singolo incorporamento ha fatto perdere il 14 percento nel punteggio di velocità della pagina, aumentando il tempo necessario prima che il sito fosse pronto per l’interazione di 6,5 secondi. Per prevenire i rallentamenti, carica lo script della mappa solo sulla pagina che lo utilizza, usa il lazy-load per l’iFrame oppure aggiungi un’immagine segnaposto con caricamento al clic.
Sì, ma non con l’incorporamento iFrame di base. Per più indicatori, crea una mappa in Google My Maps: posiziona i tuoi segnaposto, impostala come pubblica, copia il codice di incorporamento e incollalo sul tuo sito web. Anche se puoi aggiungerne quanti ne vuoi, non puoi personalizzare lo stile della mappa né aggiungere pannelli informativi personalizzati. Se desideri più segnaposto e funzionalità di personalizzazione, il widget Google Maps di Jotform fa al caso tuo (richiede solo la tua chiave API di Google Maps).
Sì. Molti plug-in Google Maps WordPress hanno piani gratuiti utilizzabili che coprono le mappe di base, anche se le funzionalità avanzate sono solitamente riservate al piano a pagamento. Se preferisci non installare un plug-in, l’iFrame nativo di Google Maps e Google My Maps sono entrambi gratuiti. Anche il widget Google Maps di Jotform è gratuito, aggiungendo personalizzazione e mappe con più segnaposto che non aumentano il carico del server, ma richiede comunque una chiave API di Google Maps.
Questo articolo è rivolto a proprietari di siti WordPress, attività locali, agenti immobiliari e organizzatori di eventi che vogliono confrontare i modi per aggiungere una mappa interattiva e ottimizzata per dispositivi mobili con incorporamenti, plug-in o widget personalizzabili.
Invia un Commento: