Come creare marcatori mappa personalizzati (la guida completa)

Se hai mai provato ad aggiungere marker personalizzati a un sito directory, una mappa Leaflet o una dashboard Mapbox, conosci già il problema.

I marker predefiniti sembrano generici.

Se hai mai provato ad aggiungere marker personalizzati a un sito directory, una mappa Leaflet o una dashboard Mapbox, conosci il ciclo.

I predefiniti sembrano generici. Gli strumenti gratuiti esistenti tendono a coprire una sola libreria di icone (di solito Font Awesome) e a produrre solo PNG.

Nel momento in cui hai bisogno di un marker che usi un'icona Lucide, che corrisponda esattamente ai colori del tuo brand, o che venga generato come SVG pulito che puoi ricolorare con CSS, sei di nuovo su Illustrator o a incollare percorsi SVG in un CodePen..

Sviluppiamo GeoDirectory da oltre 12 anni, e i marker personalizzati per mappe emergono nei ticket di supporto ogni singola settimana.

Quindi abbiamo costruito lo strumento che avremmo voluto esistesse: MapMarker Studio.

È gratuito, funziona nel browser, non richiede registrazione, include oltre 40.000 icone, consente di scaricare marker SVG o PNG pixel-perfect e genera codice pronto da incollare per tutte le principali piattaforme di mapping.

Questo post è la guida completa alla creazione di marker personalizzati per mappe.

Cosa sono, perché i predefiniti non bastano, come progettarne di buoni e come inserirli concretamente nella tua mappa.

Cos'è un marker personalizzato per mappe?

Un marker mappa è l'indicatore visivo che segna una posizione su una mappa.

Ogni piattaforma di mapping include un marker predefinito.

Google Maps ha la sua lacrima rossa, Leaflet ha uno spillo blu e Mapbox usa un cerchio.

Funzionano, ma sono poco memorabili.

Quando hai più di un tipo di location su una mappa (ristoranti vs. hotel, aperto vs. chiuso, gratuito vs. a pagamento), hai bisogno di una differenziazione visiva che i predefiniti non ti offrono.

Un marker personalizzato è qualsiasi marker che hai progettato o personalizzato tu stesso.

Forma diversa, colore diverso, un'icona al suo interno, un'etichetta, un'ombra: qualunque cosa aiuti gli utenti a scansionare la mappa più rapidamente.

Ci sono tre categorie che vale la pena conoscere.

Marker basati su immagini sono file PNG o SVG posizionati sulla mappa a coordinate specifiche.

Semplici, universali, supportati ovunque. Il compromesso è che i PNG non scalano in modo nitido su display retina a meno che non si usi SVG, e per cambiare colore bisogna riesportare.

Marker simbolo o icona sono forme vettoriali disegnate direttamente dalla libreria di mapping, stilizzate con codice.

Nitidi a qualsiasi livello di zoom, facili da ricolorare al volo. Nativi di librerie come Mapbox GL e Leaflet (tramite plugin).

Marker HTML usano un elemento HTML completo come marker. Utili per cluster, badge informativi e pin animati.

Più flessibili, più costosi da renderizzare su larga scala.

Per il 90% dei casi d'uso in siti directory e dashboard, i marker SVG basati su immagini sono la scelta giusta. Nitidi, leggeri, facili da ricolorare e compatibili con ogni piattaforma.

Perché i marker predefiniti non bastano

Tre motivi per cui le persone finiscono per aver bisogno di marker personalizzati.

Più categorie su una sola mappa. Se la tua mappa mostra ristoranti, hotel e stazioni di servizio, hai bisogno di tre marker visivamente distinti. Stessa forma con icone diverse, o stessa icona con colori diversi. Le impostazioni predefinite te ne offrono una sola.

Coerenza del brand. Una dashboard SaaS con grigi neutri e un solo colore di accento non dovrebbe avere un pin rosso Google che spicca fuori luogo. Il marker fa parte dell'interfaccia utente.

Densità delle informazioni. A meno che non stia usando un' Marker Cluster extension, una mappa con 200 marker richiede marker più semplici e piccoli rispetto a una mappa con 8. Il predefinito è dimensionato per una "densità moderata" e risulta sbagliato in entrambi gli estremi.

Cosa rende un buon marker su mappa

Anni di sviluppo di mappe per siti WordPress ci hanno insegnato alcune regole. Nessuna è sorprendente. La maggior parte degli strumenti esistenti le ignora comunque.

Riconoscibile a piccole dimensioni. La maggior parte dei marker viene visualizzata tra 24 e 32 pixel. Se la tua icona non è leggibile a quella dimensione, il marker fallisce il suo scopo. Metti alla prova socchiudendo gli occhi.

Elevato contrasto rispetto alla mappa. I marker chiari su tiles di mappa chiare scompaiono. Scegli un colore di riempimento e un bordo a contrasto così che il marker sia leggibile sui temi satellite, stradale e scuro.

Una silhouette dalla forma chiara. Il pin a goccia è iconico per un motivo. Ha una chiara "punta" che indica la posizione. Cerchi, quadrati ed esagoni funzionano bene, ma un marker privo di un punto di ancoraggio chiaro può indurre gli utenti a fraintendere a quale punto della mappa si riferisce.

L'icona dentro il marker, non accanto. I marker con l'icona all'esterno (in stile etichetta) ingombrano la mappa. Mantieni il significato all'interno della silhouette.

Massimo tre colori. Marker, icona e un accento. Oltre a questo, il marker risulta caotico a piccole dimensioni.

Le 8 forme di marker che coprono il 95% dei casi d'uso

Abbiamo testato decine di silhouette di marker su mappe GeoDirectory reali. Queste otto gestiscono quasi qualsiasi esigenza.

1. Pin (classico a goccia). Il leggendario pin di Google Maps. Il miglior predefinito.
2. Cerchio. Minimalista, moderno. Ideale per mappe dense.
3. Quadrato arrotondato. Stile Material Design. Adatto alle UI in stile app.
4. Quadrato. Netto, tecnico. Adatto a dashboard architettoniche o di dati.
5. Bandiera. Aria da destinazione e traguardo. Ottimo per eventi e punti di partenza/arrivo.
6. Scudo. Sicurezza, protezione, ufficialità. Ottimo per servizi di emergenza o inserzioni verificate.
7. Esagono. Di tendenza nel tech e nella data visualization. Ottimo per dashboard moderne.
8. Fumetto. Contesti di recensioni e chat. Ottimo per testimonianze o marker di commenti.

MapMarker Studio include tutti e otto come punto di partenza.

Scegliere l'icona giusta

L'icona all'interno del marker porta il significato. Scegli l'icona sbagliata e anche un marker dal design impeccabile fallisce il suo scopo. Alcune linee guida.

Usa una sola libreria di icone su tutta la mappa. Mescolare Font Awesome con Lucide e SVG personalizzati crea rumore visivo. Scegli una libreria e mantienila.

Abbina lo stile dell'icona allo stile del marker. Icone con contorno per marker con contorno, icone piene per marker pieni. La coerenza stilistica conta più della libreria che scegli.

Evita icone con linee sottili. Un tratto da 1px scompare alla dimensione del marker. Scegli icone con spessori da 1,5px o superiori, oppure librerie che offrono più spessori (Phosphor è ottima per questo).

MapMarker Studio include in bundle 14 delle migliori librerie di icone: Lucide, Phosphor, Tabler, Font Awesome, Heroicons, Material Symbols, Iconoir, Remix, Boxicons, Bootstrap Icons, Mage, Octicons, Radix e Simple Icons (per loghi di brand come Airbnb, Starbucks e TripAdvisor).

Oltre 40.000 icone in totale. Tutte gratuite per uso commerciale.

Come aggiungere marker personalizzati alla tua mappa

Il codice esatto dipende dalla piattaforma che usi. Ecco come funziona nelle più comuni, inclusa la parte che di solito crea problemi.

Leaflet

const customIcon = L.icon({
  iconUrl: 'https://your-cdn.com/marker.svg',
  iconSize: [32, 40],
  iconAnchor: [16, 40],   // tip of the marker
  popupAnchor: [0, -40]
});

L.marker([40.7128, -74.0060], { icon: customIcon }).addTo(map);

L'insidia:

iconAnchor

è l'offset in pixel dall'angolo in alto a sinistra dell'icona al punto sulla mappa in cui deve essere ancorata. Per un pin a goccia, questo è il centro-basso (la punta). Se sbagli questo valore, il marker indicherà la posizione sbagliata.

Mapbox GL JS

const el = document.createElement('div');
el.style.backgroundImage = 'url(https://your-cdn.com/marker.svg)';
el.style.width = '32px';
el.style.height = '40px';
el.style.backgroundSize = 'contain';

new mapboxgl.Marker(el)
  .setLngLat([-74.0060, 40.7128])
  .addTo(map);

L'insidia: Mapbox usa l'ordine

[lng, lat]

mentre Leaflet usa

[lat, lng]

. Gli sviluppatori li scambiano in continuazione.

Google Maps

new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  icon: {
    url: 'https://your-cdn.com/marker.svg',
    scaledSize: new google.maps.Size(32, 40),
    anchor: new google.maps.Point(16, 40)
  }
});

L'insidia: Google Maps memorizza nella cache in modo aggressivo gli URL delle icone. Se stai testando modifiche allo stesso URL SVG, aggiungi un

?v=2

cache buster.

GeoDirectory

Per gli utenti di GeoDirectory, i marker personalizzati vanno in Categorie → Modifica Categoria → Icona Categoria Predefinita. Carica il file SVG o PNG e GeoDirectory lo utilizzerà automaticamente per ogni inserzione in quella categoria.

Image URL: https://your-cdn.com/restaurant-marker.svg
Recommended size: 36×46 px

MapMarker Studio genera un file SVG pronto per GeoDirectory con le dimensioni e il punto di ancoraggio corretti. Caricalo e il gioco è fatto.

Progetta una volta, esporta ovunque

Il motivo per cui abbiamo creato MapMarker Studio è il ciclo descritto sopra. Progetti un marker in Figma, esporti un SVG, scrivi la configurazione Leaflet a memoria (e sbagli l'iconAnchor al primo tentativo), testi, correggi, pubblichi. Poi ripeti per ogni categoria della tua mappa.

Lo strumento riduce quel ciclo a quattro passaggi.

1. Scegli una forma (8 opzioni).
2. Scegli un'icona (40.000+ da 14 librerie).
3. Scegli i colori.
4. Codice pronto da copiare e incollare per Leaflet, Mapbox e Google Maps. Oppure scarica SVG/PNG direttamente per la maggior parte dei plugin WordPress per mappe e directory.

Tutto funziona nel tuo browser. Nessuna registrazione. Nessun caricamento su server. Gratuito.

Prova MapMarker Studio →

Una nota sui formati di file

Se devi portarti via una sola cosa da questa guida: usa SVG. Il PNG è accettabile come alternativa quando la tua piattaforma non supporta davvero SVG, ma nel 2026 è un caso raro.

SVG rimane nitido a ogni livello di zoom, ha file di dimensioni inferiori per la complessità tipica dei marker e supporta la ricolorazione tramite variabili CSS. Il PNG perde qualità sugli schermi retina, a meno che non fornisci varianti 2× e 3×.

L'unica eccezione riguarda le prestazioni su scala estrema. Le mappe con oltre 1.000 marker simultanei possono essere renderizzate leggermente più velocemente con PNG. Per tutto ciò che è al di sotto di quella soglia, SVG è la scelta giusta.

Conclusioni

I marker personalizzati per le mappe sono uno di quei compiti che sembrano dover richiedere 10 minuti e finiscono per prendere due ore. La maggior parte delle difficoltà sta negli strumenti.

Ogni soluzione esistente è o troppo limitata, o troppo costosa, o troppo generica.

Abbiamo creato MapMarker Studio perché ci eravamo scontrati noi stessi con questo ostacolo decine di volte nelle installazioni di GeoDirectory.

È gratuito, resterà gratuito e funziona con ogni piattaforma di mappe a cui abbiamo pensato.

Se trovi un caso d'uso che non copre, faccelo sapere. Lo strumento migliora grazie a te.

Apri MapMarker Studio →