Hai bisogno di una mappa interattiva sul tuo sito WordPress e le classiche Google Maps non bastano? Una mappa in iframe standard non offre regioni cliccabili, tooltip o una directory di oggetti filtrabile. E il tuo cliente vuole una mappa con ricerca per indirizzo e regioni colorate per mostrare statistiche.

MapSVG è uno dei pochi plugin WordPress che gestisce tutto questo con un unico strumento. È usato da oltre 16.000 siti e la versione gratuita su WordPress.org ti permette di provare quasi tutte le funzionalità di base senza pagare. Qui sotto trovi un'analisi dettagliata delle funzionalità, una guida pratica alla configurazione e un verdetto onesto su a chi è adatto questo plugin e chi invece dovrebbe cercare altrove.

💡 Panoramica rapida:

• Carica una mappa SVG già pronta dalla libreria integrata o carica un tuo file.
• Collega alle regioni oggetti del database con campi personalizzati.
• Configura tooltip e finestre popover tramite l'editor di template.
• Se necessario, sovrapponi la mappa vettoriale a Google Maps.
• Inserisci lo shortcode in una pagina e verifica il risultato.

Cosa può fare MapSVG: analisi delle funzionalità principali

Il plugin è sviluppato da Roman Stepanov (RomanCode su WordPress.org). Il progetto è attivo dal 2012 e riceve aggiornamenti regolari: a giugno 2026 la versione corrente è la 8.6.6, con più rilasci al mese secondo il changelog. Questo è importante per un plugin che lavora con le API di Google Maps, perché senza aggiornamenti regolari le mappe si rompono ogni volta che la chiave API cambia.

Oltre 100 mappe geo-calibrate già pronte

Il plugin include una libreria con più di 100 mappe SVG geo-calibrate. La mappa del mondo è già suddivisa in paesi cliccabili. Le mappe dei singoli paesi con la divisione in stati, province e regioni sono disponibili separatamente. Ci sono anche diverse mappe speciali.

Geo-calibrazione significa che ogni area della mappa è legata a coordinate reali. Puoi aggiungere marcatori tramite indirizzo o latitudine/longitudine e questi si posizioneranno con precisione sulla regione corretta. Non trovi la mappa giusta nella libreria? Disegna un SVG in Inkscape o Adobe Illustrator, caricalo su MapSVG e il plugin trasforma il tuo vettore in una mappa interattiva con zone cliccabili.

Oggetti del database con campi personalizzati

Questa funzionalità distingue MapSVG dalla maggior parte dei plugin di mappatura per WordPress. Puoi creare voci (oggetti) nel database integrato del plugin con qualsiasi insieme di campi ti serva: testo, numeri, immagini, checkbox, elenchi a discesa. Poi colleghi un oggetto a una specifica regione della mappa.

Esempio: un'agenzia immobiliare crea oggetti per gli immobili con indirizzo, prezzo, superficie e foto. Ogni oggetto è collegato a una regione sulla mappa. Un visitatore clicca su un'area e vede la scheda dell'immobile in una bella finestra popup, in una vista di dettaglio o in un tooltip. Non serve alcun plugin esterno per l'archiviazione dei dati: tutto rimane all'interno di MapSVG.

Directory con filtri e ricerca

Gli oggetti del database possono essere visualizzati non solo sulla mappa, ma anche come directory filtrabile accanto ad essa. Quando un utente inserisce una query nella barra di ricerca o seleziona un valore da un filtro a discesa, la directory e la mappa si aggiornano in sincrono. Cliccare su una regione della mappa filtra la directory e viceversa.

Le versioni premium aggiungono filtri per categoria, codice postale e data. L'importazione CSV è supportata e, a partire dal livello Plus, i dati possono essere prelevati direttamente da Google Sheets (quando l'origine si aggiorna, la mappa si aggiorna automaticamente).

Sovrapposizione della mappa vettoriale su Google Maps

Le Google Maps standard via iframe non offrono quasi nessuna personalizzazione. MapSVG risolve questo problema in modo radicale: sovrapponi il tuo layer SVG interattivo sopra Google Maps di qualsiasi tipo (satellite, terreno, stradale, ibrido). Ti serve solo una chiave API di Google Maps.

Il layer vettoriale è completamente cliccabile: zone, marcatori e tooltip funzionano esattamente come su una normale mappa SVG. Il risultato è una mappa che ha l'aspetto di Google Maps ma si comporta come un'applicazione web completamente personalizzata. Evidenziazione di punti di riferimento, percorsi interattivi e regioni sono tutti configurabili.

Editor integrati per CSS, JavaScript e template Handlebars

Per chi lavora con il codice, MapSVG offre tre editor integrati. L'editor CSS consente di modificare gli stili dei tooltip, le finestre popup e i marcatori vedendo i risultati in tempo reale. L'editor JavaScript permette di agganciarsi agli eventi della mappa (clic su una regione, hover) e scrivere logica middleware. L'editor di template Handlebars dà il pieno controllo sulla struttura HTML di tooltip, finestre popover e viste di dettaglio.

In pratica questo significa che un template per tooltip con foto, prezzo e pulsante «Scopri di più» si può costruire in cinque minuti. E tramite JavaScript puoi, per esempio, inviare una richiesta AJAX al clic su una regione e caricare dati dinamicamente.

Pannello di controllo con anteprima in tempo reale

L'interfaccia di MapSVG è un pannello dedicato all'interno dell'amministrazione di WordPress. La creazione della mappa è un processo guidato: scegli la sorgente, configuri regioni, colori, tooltip, pubblichi. Tutte le modifiche appaiono all'istante nella finestra di anteprima; non devi salvare e ricaricare la pagina per vedere i risultati.

La navigazione avviene tramite un menu a tendina organizzato per sezioni (Regioni, Colori, Template, Impostazioni). L'interfaccia può sembrare complessa per i principianti, dato che ci sono molte opzioni, ma dopo la prima ora la logica diventa chiara.

Mappe da immagini raster

MapSVG funziona non solo con SVG vettoriali ma anche con comuni file PNG e JPEG. Gli strumenti di disegno integrati ti permettono di ricalcare aree su un'immagine raster, che diventano zone cliccabili. Questo apre a scenari che le mappe vettoriali non possono gestire: planimetrie interattive, mappe dei posti a sedere, schemi tecnici, percorsi e piante urbane.

Tecnicamente prendi una foto di una planimetria, ricalchi le stanze con lo strumento «Disegna regione», aggiungi etichette e ottieni una pianta interattiva dove cliccando su una stanza si mostrano le relative informazioni. I clienti nei settori eventi e immobiliare lo apprezzeranno.

Guida pratica: installazione e creazione della prima mappa

Installare MapSVG non è diverso da qualsiasi altro plugin WordPress. La differenza sta nel processo di creazione della mappa: serve almeno un passaggio nel menu per capire la logica dell’interfaccia. Dopodiché è tutto in discesa.

Step 1. Installare il plugin

Scarica MapSVG da WordPress.org (versione Lite gratuita) o acquista la versione premium su mapsvg.com. Poi nell’amministrazione di WordPress: Plugin → Aggiungi nuovo → Carica plugin.

Clicca Carica (1), seleziona il file ZIP del plugin (2) e Installa ora (3):

Attendi il completamento dell’installazione e attiva:

Fatto. Nel menu laterale dell’amministrazione comparirà la voce MapSVG; cliccaci sopra.

Step 2. Creare una mappa da un modello già pronto

Nella schermata iniziale del pannello MapSVG vedrai diverse opzioni: scegliere una mappa già pronta, creare una mappa Google (dopo aver inserito una chiave API), costruire una mappa immagine, caricare il tuo SVG oppure caricare un file SVG sopra Google Maps. I link Tutorial e Supporto in cima al pannello portano alla documentazione e all’assistenza.

Scegli Nuova mappa SVG e trova la mappa che ti serve nell’elenco a discesa. Per questo esempio useremo la mappa della Cina, che è divisa in province e completamente pronta all’uso.

Nella schermata successiva inserisci il titolo della mappa. Qui puoi anche configurare dimensioni, responsività (attiva per impostazione predefinita), tooltip e finestre popup. Le regioni sono già cliccabili e la mappa è pronta per essere personalizzata.

Step 3. Configurare i colori

Vai su Menu → Colori. La tavolozza colori ti permette di impostare i colori per regioni, sfondo, bordo e stati (hover, attivo). Non ci sono restrizioni; scegli qualsiasi tonalità.

Una volta impostati i colori, clicca Salva Ctrl + S:

La mappa si ricolora immediatamente nella finestra di anteprima. Pochi clic e lo schema colori è pronto.

Step 4. Aggiungere i tooltip

Crea un modello di tooltip. Vai su Menu → Modelli → Tooltip regione. L’editor di modelli Handlebars supporta il tag {{title}}, che restituisce il nome della regione. Modello base:

1
Region: <strong>{{title}}</strong>

Clicca Salva Ctrl + S. Poi attiva i tooltip: Menu → Impostazioni → Tooltip.

Ora, quando passi il mouse su una regione, compare un tooltip con il suo nome. Questo è lo scenario base. Per aggiungere foto, prezzi e altri dati al tooltip, ti servono i campi personalizzati.

Step 5. Campi personalizzati tramite oggetti database

MapSVG ti permette di aggiungere campi personalizzati alle regioni. I tipi di campo includono testo, area di testo, checkbox, immagini e altri. Creiamo un campo immagine.

Vai su Menu → Regioni e clicca Modifica campi:

Clicca il pulsante Immagine per aggiungere un campo di tipo immagine, poi Salva campi:

Non dimenticare di cliccare Salva Ctrl + S. Poi passa alla scheda Elenco:

Attiva la modalità Modifica regioni e clicca sulla regione desiderata (per esempio, Nei Mongol). Sulla destra comparirà un nuovo campo Immagini. Clicca Sfoglia:

Aggiungi le immagini tramite la libreria media di WordPress e clicca Seleziona immagini:

Il sistema ti riporterà alla schermata di modifica della regione. Clicca OK (1), poi Salva Ctrl + S (2) e torna alla modalità Anteprima (3):

Le immagini sono state aggiunte, ma non compariranno ancora nel tooltip: devi aggiornare il template. Vai su Menu → Template → Tooltip regione e sostituisci il codice:

1
Region: <strong>{{title}}</strong><br />
2
First image:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
All images:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Salvate il template. Ora, quando passate il mouse su Nei Mongol, il tooltip mostra le immagini caricate:

Step 6. Pubblicare la mappa sul sito

Salvate tutte le modifiche. Andate su Pagine → Aggiungi nuova, cliccate il pulsante MapSVG sopra l'editor:

Selezionate la mappa creata dall'elenco e il plugin inserirà lo shortcode [mapsvg id="17" title="China"]. Pubblicate la pagina e verificate il risultato nel frontend:

La mappa è completamente responsive; su dispositivi mobili le regioni e i tooltip funzionano senza perdere funzionalità. Lo shortcode può essere inserito in qualsiasi articolo, pagina o widget e la mappa si caricherà correttamente.

⁉️🤔 Domande frequenti

Serve una chiave API di Google Maps per far funzionare MapSVG?

Solo se intendete usare il layer Google Maps. Per lavorare con mappe SVG già pronte dalla libreria e con i vostri file SVG, non serve alcuna chiave. Se vi serve Google Maps, ottenete una chiave API dalla Google Cloud Console e inseritela nelle impostazioni del plugin; l'operazione richiede un paio di minuti.

Posso caricare un mio file SVG?

Sì. Disegnate una mappa in Inkscape o Adobe Illustrator, salvatela come SVG, caricatela su MapSVG. Il plugin trasformerà automaticamente le forme vettoriali in regioni cliccabili. Se la mappa non è geo-calibrata, i marker per indirizzo non funzioneranno; dovrete posizionarli manualmente.

Che differenza c'è tra la versione a pagamento e quella gratuita?

La versione gratuita Lite offre mappe e marker illimitati, tooltip, finestre popover e campi personalizzati. I piani a pagamento aggiungono funzionalità in modo progressivo: Starter ($49/anno) aggiunge una directory filtrabile e template personalizzati; Plus ($99/anno) aggiunge l'integrazione con Google Sheets, ACF e Metabox; Pro ($199/anno) aggiunge il clustering dei marker e la modifica front-end; Elite ($299/anno) aggiunge API REST e sorgenti dati MySQL. Sono disponibili anche licenze a vita, con prezzi da $99 a $599.

Il plugin è adatto a chi non sa programmare?

Una mappa base con regioni e tooltip si può realizzare senz'altro senza codice; l'interfaccia è visuale. Ma quando servono template personalizzati per i tooltip (Handlebars) o stilizzazione (CSS), una minima conoscenza dell'HTML è d'aiuto. La documentazione su mapsvg.com/docs è scritta con esempi e il supporto risponde rapidamente.

Le mappe rallentano il sito?

No. Una mappa SVG è un vettore che pesa kilobyte, non megabyte. Il rendering avviene lato client tramite JavaScript. Con un numero elevato di marker (centinaia o migliaia) consigliamo di attivare il clustering, disponibile dal piano Pro.

Come funzionano supporto e aggiornamenti?

Il plugin viene aggiornato diverse volte al mese; il changelog su WordPress.org mostra che lo sviluppatore corregge attivamente bug e aggiunge funzionalità. Il supporto è disponibile tramite una chat integrata direttamente dal pannello di amministrazione (dopo l'attivazione). Gli utenti segnalano nelle recensioni che le risposte sono rapide, ma a causa delle differenze di fuso orario una risposta può richiedere alcune ore.

MapSVG vale l'acquisto: verdetto finale

MapSVG è uno strumento specializzato che supera di gran lunga i plugin standard per Google Maps quando serve una vera interattività: regioni cliccabili, directory filtrabili e tooltip personalizzati. Se il vostro compito è "inserire una mappa con indicazioni stradali", il plugin è sproporzionato. Se il vostro compito è una mappa immobiliare, un localizzatore di negozi, statistiche regionali interattive o una mappa di posti a sedere, MapSVG è una delle migliori opzioni sul mercato WordPress.

La versione gratuita Lite copre scenari per cui altri plugin fanno già pagare: mappe e marker illimitati, campi personalizzati, tooltip e finestre popover. È una generosità rara per un modello freemium; potete avviare un progetto senza budget e acquistare un piano quando avete bisogno di filtri, una directory o l'integrazione con Google Sheets.

La nostra esperienza: dopo una serata con la documentazione, una mappa della Cina con tooltip e immagini era pronta. È vero che l'interfaccia a prima vista non è intuitiva (tante opzioni e menu), ma la curva di apprendimento è breve. Gli editor integrati per CSS/JS/Handlebars sono una manna per gli sviluppatori: non serve scavare nei file del tema.

Se cercate un plugin per mappe WordPress e non volete scontrarvi con le limitazioni della versione gratuita dopo un mese, iniziate con MapSVG Lite su WordPress.org. E se vi serve un'alternativa, date un'occhiata alla nostra rassegna di plugin per mappe WordPress, dove abbiamo confrontato una dozzina di opzioni per diversi casi d'uso.