Come aggiungere una mappa interattiva in WordPress

Aggiungere una mappa al tuo sito WordPress è importante se gestisci un'attività con una sede fisica o crei contenuti su luoghi specifici.

Potrebbe sembrare complicato all'inizio, ma abbiamo trovato alcuni strumenti utili che rendono il processo molto più semplice. In questo articolo, ti mostreremo due metodi semplici per aggiungere una mappa interattiva al tuo sito WordPress.

Ti guideremo passo dopo passo, dalla scelta dello strumento giusto all'incorporamento della mappa nella tua pagina.

Quando aggiungere una mappa interattiva in WordPress

Se hai un'attività fisica, come un negozio o un bar, una mappa interattiva può aiutare i potenziali visitatori a trovare la tua sede. Questo può portarti più clienti, vendite e persino appuntamenti e prenotazioni di persona.

Può anche migliorare l'esperienza utente, poiché i visitatori possono pianificare il loro viaggio senza dover utilizzare un'app o un sito web di mappe separato.

A seconda del tuo sito web, una mappa interattiva potrebbe persino fornire contenuti utili. Ad esempio, se hai un blog di fitness, potresti mostrare percorsi di corsa o escursioni consigliati ai tuoi lettori.

Allo stesso modo, se hai un blog di famiglia, potresti evidenziare tutte le attrazioni adatte ai bambini dove il tuo pubblico può portare le proprie famiglie.

Detto questo, vediamo due modi semplici per aggiungere una mappa interattiva in WordPress. Utilizza semplicemente i collegamenti rapidi qui sotto per saltare direttamente al metodo che desideri utilizzare:

• Metodo 1. Aggiungere una mappa del mondo interattiva utilizzando un page builder (pagine personalizzate con mappe)
• Metodo 2. Creare mappe personalizzate interattive gratuitamente utilizzando Google My Maps

Metodo 1. Aggiungere una mappa del mondo interattiva utilizzando un page builder (Pagine personalizzate con mappe)

Il modo più semplice per aggiungere una semplice mappa interattiva in WordPress è utilizzare Google Maps e il plugin SeedProd.

Questo plugin page builder avanzato ti consente di creare pagine dal design professionale senza dover scrivere una sola riga di codice.

Viene inoltre fornito con un blocco Google Maps già pronto che puoi semplicemente trascinare e rilasciare nel tuo layout. I visitatori possono interagire con la tua mappa utilizzando i pulsanti di zoom, oppure possono trascinarla per esplorare altre aree.

SeedProd rende facile progettare pagine autonome con un design unico, quindi questa è anche un'ottima scelta se desideri aggiungere una mappa interattiva a una homepage personalizzata o a una landing page.

La prima cosa da fare è installare e attivare SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, devi inserire una chiave di licenza.

Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd. Dopo aver aggiunto la chiave di licenza, fai clic su ‘Verifica chiave’.

Fatto ciò, vai su SeedProd » Pagine di destinazione e fai clic su ‘Aggiungi nuova pagina di destinazione’.

SeedProd mostrerà ora tutti i modelli che puoi utilizzare per creare bellissime pagine di destinazione, pagine di vendita e altro ancora. Per aiutarti a trovare il modello giusto per il tuo sito web, i modelli di SeedProd sono divisi in categorie come modalità di manutenzione, in arrivo, webinar e altro ancora.

Per esaminare più da vicino un design, passa il mouse sopra quel modello. Quindi, fai clic sull'icona della lente d'ingrandimento.

Questo aprirà il modello in una nuova scheda.

Quando trovi un design che vuoi usare sul tuo sito WordPress, fai semplicemente clic su ‘Scegli questo modello’.

Ora puoi digitare un nome per la tua landing page nel campo ‘Nome pagina’. Questo è solo per tuo riferimento, quindi puoi usare quello che vuoi.

SeedProd creerà automaticamente un ‘URL pagina’ utilizzando il nome della pagina, ma puoi modificare questo URL generato automaticamente.

Quando sei soddisfatto delle informazioni che hai inserito, fai clic su 'Salva e inizia a modificare la pagina'. Questo caricherà l'interfaccia del page builder di SeedProd.

Questo semplice builder drag-and-drop mostra un'anteprima live della pagina sulla destra. Sulla sinistra c'è un menu che mostra i diversi blocchi e sezioni che puoi aggiungere al tuo blog WordPress o sito web.

SeedProd viene fornito con oltre 90 blocchi pronti all'uso che possono aiutarti a creare rapidamente un bellissimo design di pagina. Questo include blocchi avanzati come timer per il conto alla rovescia e embed come un lettore audio da SoundCloud o video da TikTok.

Puoi anche usare blocchi SeedProd come spaziatori, colonne e divisori per strutturare la pagina. Questo può aiutare i visitatori a navigare nella pagina e trovare le informazioni che desiderano.

Quando trovi un blocco che vuoi aggiungere al layout della pagina, semplicemente trascinalo sul modello. Mentre crei la tua landing page, puoi spostare questi blocchi nel tuo layout trascinandoli.

Per aggiungere una mappa interattiva, trova semplicemente il blocco Google Maps nel menu a sinistra e trascinalo sul tuo layout.

Il blocco Google Maps mostrerà una posizione predefinita, ma di solito vorrai cambiarla.

Fai semplicemente clic per selezionare il blocco di Google Maps e poi fai clic sulla piccola icona a forma di ingranaggio che appare nella barra degli strumenti.

Questo apre le impostazioni del blocco nel menu di sinistra.

Qui, digita un indirizzo diverso nel campo 'Posizione'.

Il blocco si aggiornerà ora per mostrare questo indirizzo.

I visitatori possono ingrandire e rimpicciolire questa posizione manualmente utilizzando i pulsanti di livello di zoom '+' e '-' nell'angolo in basso a destra della mappa. Tuttavia, puoi cambiare lo zoom predefinito trascinando il cursore 'Zoom' o digitando un numero esatto nella casella di testo.

Dopodiché, potresti voler ridimensionare il blocco utilizzando i cursori 'Larghezza' e 'Altezza'. L''Altezza' è mostrata in pixel, ma la 'Larghezza' è la percentuale totale disponibile. Ad esempio, '100' significa che il blocco di Google Maps occupa il 100% della larghezza disponibile.

Per modificare uno di questi valori, trascina semplicemente i cursori o digita un numero nella casella di testo. Man mano che apporti modifiche, il blocco di Google Maps si aggiornerà automaticamente in modo da poter provare diverse impostazioni per vedere quale funziona meglio.

Se imposti la larghezza a meno del 100%, potresti voler cambiare l'allineamento del blocco. Ad esempio, potresti mostrare la mappa interattiva al centro della pagina.

Per apportare questa modifica, fai semplicemente clic sui diversi pulsanti nella sezione 'Allineamento'.

Ora puoi continuare a lavorare sul design trascinando nuovi blocchi sul layout della pagina e quindi apportando modifiche nel menu di sinistra. Per ulteriori informazioni, consulta la nostra guida su come creare una landing page in WordPress.

Quando sei soddisfatto di come è impostata la pagina, fai clic sulla freccia accanto al pulsante 'Salva' e quindi seleziona 'Pubblica'.

Ora, se visiti il tuo sito web, vedrai la mappa interattiva in azione.

Metodo 2. Crea Mappe Personalizzate Interattive Gratuitamente Utilizzando Google My Maps

Se desideri aggiungere una Mappa Google con interazioni di base, allora SeedProd è un'ottima scelta.

Tuttavia, se hai bisogno di fornire interazioni più avanzate, ti consigliamo di utilizzare invece Google My Maps.

Questo servizio online gratuito ti consente di personalizzare una mappa di Google con indicatori unici, punti di interesse, indicazioni stradali e altro ancora. Puoi quindi aggiungerla al tuo sito web utilizzando il codice, quindi non avrai bisogno di installare un plugin WordPress separato.

Passaggio 1: Crea una mappa interattiva utilizzando Google My Maps

Innanzitutto, devi visitare il sito web di Google My Maps e fare clic su 'Crea una nuova mappa'.

Ora vedrai l'editor della mappa.

Qui puoi selezionare una mappa di base e aggiungere punti di interesse, livelli e altro.

Per aiutarti a mantenere organizzato il tuo lavoro, è una buona idea dare un nome al livello.

Per fare ciò, fai clic sui tre punti accanto a 'Livello senza titolo' e quindi seleziona 'Rinomina questo livello'.

Ora puoi digitare il nome che desideri utilizzare. Questo è solo per tua informazione, quindi puoi usare quello che vuoi.

Fatto ciò, fai clic su ‘Salva’.

Successivamente, puoi cambiare l'aspetto della mappa scegliendo uno degli stili pronti all'uso. Per vedere le opzioni disponibili, fai clic sulla freccia accanto a 'Mappa di base'.

Puoi quindi fare clic su una qualsiasi delle miniature per applicare quello stile alla mappa.

Passaggio 2: Aggiungi Punti di Interesse alla Mappa Interattiva

Se vuoi solo creare una mappa semplice, puoi saltare al passaggio 4. Tuttavia, potresti voler personalizzare la mappa aggiungendo punti di interesse.

Quando un visitatore fa clic su uno di questi punti, si aprirà un tooltip che mostrerà il nome della località, oltre a una descrizione, foto e video, ove disponibili.

Ci sono diversi modi per aggiungere punti di interesse cliccabili, ma il più semplice è digitare l'indirizzo nella barra di ricerca e quindi fare clic sull'icona 'Cerca'.

Google My Maps ingrandirà ora l'area.

A volte, la località potrebbe essere già stata aggiunta come punto di interesse, specialmente se il luogo è una grande attrazione turistica o un edificio famoso. In tal caso, puoi semplicemente fare clic sulla località e quindi selezionare 'Aggiungi alla mappa'.

Se il punto di interesse esiste già, Google My Maps mostrerà automaticamente alcune informazioni su questa località in un popup. Tuttavia, potresti voler personalizzare queste informazioni predefinite o aggiungere le tue foto e video.

Per fare ciò, fai clic sull'icona 'Modifica', che assomiglia a una piccola matita.

Ora puoi digitare il titolo e la descrizione che desideri mostrare a chiunque faccia clic su questo luogo di interesse.

Quando sei soddisfatto delle informazioni inserite, fai clic su 'Salva'.

Un'altra opzione è aggiungere le tue immagini e video al popup.

Ad esempio, se stai creando una mappa interattiva per il tuo sito web di un ristorante, potresti aggiungere foto dell'esterno del locale per aiutare i clienti a trovarlo.

Potresti persino utilizzare questo popup per acquisire più clienti. Ad esempio, se stai aggiungendo il tuo studio fotografico come punto di interesse, potresti caricare il tuo portfolio fotografico.

Per aggiungere contenuti multimediali, fai semplicemente clic sulla piccola icona della fotocamera.

Ora puoi scegliere un'immagine o un video nel popup che appare.

Dopo aver effettuato la selezione, fai clic su 'Inserisci'.

Al termine, non dimenticare di fare clic su 'Salva' per memorizzare le modifiche.

A volte, potresti voler mostrare una località che non è stata aggiunta a Google Maps. Potrebbe essere il tuo ufficio, un localizzatore di negozi, un'attrazione turistica nuovissima o il punto d'incontro per il tuo evento o conferenza.

Per aggiungere un indicatore, fai clic sull'icona 'Aggiungi un indicatore' sotto la barra di ricerca.

Ora puoi fare clic sul punto esatto in cui desideri creare un indicatore.

Questo aprirà un popup vuoto dove puoi digitare un titolo e una descrizione. Puoi anche aggiungere immagini e video facendo clic sulla piccola icona della fotocamera.

Quando sei soddisfatto di come è configurato il popup, fai clic sul pulsante 'Salva'.

Per creare altri punti di interesse, segui semplicemente lo stesso processo descritto sopra.

Passaggio 3: Aggiungi indicazioni stradali a una mappa interattiva

Potresti anche voler aggiungere delle indicazioni stradali, che verranno mostrate come una linea blu sulla mappa.

Questa funzionalità della mappa può essere utile se desideri aiutare i partecipanti a trovare il tuo evento o una sede come il tuo bar o pub. Se gestisci un blog di viaggi, potresti persino consigliare alcuni itinerari turistici ai tuoi lettori.

Ci sono diversi modi per aggiungere indicazioni stradali, ma il metodo più semplice è fare clic sull'icona 'Aggiungi indicazioni' sotto la barra di ricerca.

Questo aggiunge una nuova sezione alla sinistra dello schermo, dove puoi digitare gli indirizzi di partenza e di arrivo che desideri utilizzare.

Per impostazione predefinita, Google Maps mostrerà le indicazioni stradali per auto, ma puoi passare alle indicazioni per pedoni o ciclisti. Fai semplicemente clic sul testo che mostra 'In auto' per impostazione predefinita e quindi seleziona l'icona Bicicletta o Pedone.

Un'altra opzione è disegnare una linea sulla mappa. Questo è utile se desideri mostrare un percorso molto specifico tra due o più località, piuttosto che il percorso più veloce.

Per fare ciò, fai clic sull'icona 'Disegna una linea' sotto la barra di ricerca. Ora puoi scegliere se desideri aggiungere un percorso per auto, pedoni o ciclisti.

Dopodiché, fai clic sul punto di partenza e disegna una linea spostando il mouse lungo il percorso che desideri intraprendere.

Quando raggiungi la destinazione, fai semplicemente clic per posizionare un segnaposto in quel punto. A questo punto, puoi interrompere il disegno o continuare a spostare il mouse per aggiungere altri segnaposti al percorso.

Passaggio 4: Pubblica la mappa interattiva in WordPress

Quando sei soddisfatto di come è impostata la mappa, puoi aggiungerla al tuo sito web utilizzando un codice di incorporamento iframe.

Per iniziare, dovrai rendere pubblica la mappa facendo clic sul pulsante 'Condividi'. Questo apre una finestra popup dove puoi digitare un titolo per la mappa e una descrizione facoltativa.

Quando sei soddisfatto delle informazioni inserite, fai clic su ‘OK.’

Successivamente, vorrai abilitare l'opzione ‘Chiunque abbia questo link può visualizzare’. Le altre impostazioni sono facoltative, quindi puoi decidere se consentire alle persone di cercare la mappa o mostrare il tuo nome e la tua immagine del profilo.

Quando sei soddisfatto della configurazione, fai clic su ‘Condividi su Drive’.

Nel popup successivo, apri il menu a discesa sotto ‘Accesso generale’ e seleziona ‘Chiunque abbia il link’.

Poiché non vogliamo che altre persone modifichino la mappa, fai clic sul menu a discesa ‘Visualizzatore/Editor’ e seleziona ‘Visualizzatore’. Infine, fai clic su ‘Fine’.

Dopodiché, fai clic sull'icona dei tre puntini nel menu a sinistra.

Quindi, scegli ‘Incorpora nel mio sito’.

Google Maps mostrerà ora un codice di incorporamento che ti consentirà di aggiungere la mappa al tuo negozio online, blog o sito web.

Puoi procedere e copiare questo codice iframe.

Ora sei pronto per incollare il codice nel tuo sito. Nella dashboard di WordPress, vai al post o alla pagina in cui desideri aggiungere una mappa interattiva e apri l'editor di Gutenberg.

Quindi, fai clic sul pulsante ‘+’ e inizia a digitare ‘HTML’ per trovare il blocco HTML personalizzato. Quando appare il blocco giusto, fai clic per aggiungerlo al post o alla pagina.

Ora puoi incollare il codice della Mappa Google nel blocco HTML personalizzato.

Quando sei pronto per andare online, fai clic sul pulsante Aggiorna o Pubblica.

Ora, se visiti il tuo sito web, vedrai la mappa interattiva in tempo reale.

Vuoi saperne di più su come aggiungere mappe a WordPress? Dai un'occhiata agli articoli qui sotto:

• Come aggiungere Google Maps in WordPress (Il modo GIUSTO)
• I migliori plugin per Google Maps per WordPress (la maggior parte sono gratuiti)
• Come incorporare una Google Map nei moduli di contatto (con segnaposto)
• Come aggiungere un localizzatore di negozi Google Maps in WordPress
• Come incorporare Bing Maps in WordPress (Passo dopo passo)

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere una mappa interattiva in WordPress. Potresti anche voler imparare come aggiungere Google Web Stories al tuo sito WordPress o leggere la nostra guida definitiva su come incorporare PDF, fogli di calcolo e altro in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.