Come aggiungere mappe alla tua app: embed, mappe interattive e localizzatori di punti vendita

Per aggiungere una mappa alla tua app, decidi prima se ti serve un embed statico (una sola posizione con un segnaposto, come «trova il nostro negozio») o una mappa interattiva (molti segnaposto dai tuoi dati, filtri, clustering, «vicino a me»). Per una sola posizione, una mappa incorporata è la soluzione più rapida e, con l'API Maps Embed di Google, gratuita. Per le mappe interattive, usa una libreria JavaScript per le mappe — Google Maps JavaScript API, Mapbox GL JS, oppure la libreria open source Leaflet con un fornitore di tile — conserva latitudine e longitudine di ogni luogo nel tuo database e limita la tua chiave API al tuo dominio. I dettagli dei fornitori qui sotto provengono dalla documentazione di ciascun fornitore a settembre 2026.

Che tipo di mappa ti serve?

La maggior parte dei siti di piccole attività ha bisogno solo della prima riga. Directory, marketplace e siti di annunci hanno bisogno della terza e della quarta.

Le tue opzioni

Google Maps Platform

La guida introduttiva di Google dice che devi creare un progetto Cloud con la fatturazione attiva e abilitare le API che ti servono. Il suo pricing pay-as-you-go prevede gli SKU Essentials, incluse le Dynamic Maps, con un tetto gratuito di 10.000 eventi al mese, e indica le Dynamic Maps a 7,00 dollari ogni 1.000 eventi oltre quella soglia (al primo scaglione di volume). Lo SKU Maps Embed è indicato come illimitato e gratuito. Google vende anche piani di abbonamento mensili. Controlla i prezzi di Google Maps Platform per i numeri aggiornati.

Mapbox

La pagina dei prezzi di Mapbox indica 50.000 caricamenti mensili gratuiti di mappe per Mapbox GL JS sul web, poi 5,00 dollari ogni 1.000 caricamenti. Vedi i prezzi di Mapbox.

Leaflet e OpenStreetMap

Leaflet si descrive come una libreria JavaScript open source per mappe interattive adatte ai dispositivi mobili, di circa 42 KB di JavaScript. Ha bisogno dei tile della mappa (le immagini che compongono la mappa) da qualche fonte. I server di tile pubblici di OpenStreetMap sono allettanti, ma la policy sull'uso dei tile richiede un'attribuzione visibile, vieta il download massivo, non offre alcuna garanzia di servizio e avverte che l'accesso ai servizi commerciali può essere revocato. Per un prodotto reale, usa una fonte di tile commerciale o self-hosted compatibile con Leaflet.

Chiavi API: pubbliche, ma limitate

Le chiavi per le mappe usate nel browser sono visibili a chiunque apra la tua pagina. È previsto, ma significa che qualcuno potrebbe copiare la tua chiave e far crescere l'utilizzo sulla tua fattura. La guida alla sicurezza di Google consiste nell'aggiungere restrizioni per sito web (HTTP referrer) con i tuoi domini, e restrizioni sulle API così la chiave funziona solo per le API che usi.

Le chiavi per servizi lato server — ad esempio la geocodifica di migliaia di indirizzi — devono essere chiavi separate conservate nei segreti del server, non nella pagina. Imposta anche avvisi di budget o quote nella console del fornitore, così un errore non può diventare una fattura salata.

Geocodifica: trasforma gli indirizzi in coordinate una volta sola

Le mappe mostrano latitudine e longitudine, non indirizzi. La conversione di un indirizzo in coordinate si chiama geocodifica, e la maggior parte dei fornitori la addebita per richiesta. Lo schema efficiente:

1. Quando un annuncio viene salvato, geocodifica il suo indirizzo sul server.
2. Conserva latitudine e longitudine nel database.
3. La mappa legge le coordinate memorizzate; non geocodifica mai alla visualizzazione della pagina.

Verifica i termini di ogni fornitore su quanto a lungo puoi conservare i risultati della geocodifica; variano.

Esempi di prompt

Una singola mappa incorporata:

Nella pagina Contatti, aggiungi una mappa Google incorporata che mostri il nostro indirizzo (12 High Street, Leeds) usando l'API Maps Embed con la chiave in GOOGLE_MAPS_EMBED_KEY. Aggiungi sotto un link «Ottieni indicazioni». Su smartphone deve occupare tutta la larghezza, e caricala in modo pigro (lazy-load).

Una mappa interattiva di annunci:

Aggiungi latitudine e longitudine alla tabella degli annunci. Quando un annuncio viene creato o il suo indirizzo cambia, geocodificalo sul server con la chiave in GEOCODING_API_KEY e salva le coordinate. Nella pagina Sfoglia, mostra una mappa con un marcatore per annuncio usando Leaflet, con clustering quando i marcatori si sovrappongono. Cliccando un marcatore si mostrano titolo, prezzo e un link. Mappa ed elenco devono usare gli stessi filtri.

«Vicino a me»:

Aggiungi un pulsante «Vicino a me» che chiede la posizione del visitatore e mostra gli annunci entro 10 km, ordinati per distanza. Se rifiuta l'accesso alla posizione, permettigli di digitare una città.

Passo dopo passo

1. Scegli il tipo di mappa dalla tabella in alto.
2. Crea l'account presso il fornitore e un progetto, e abilita solo le API che ti servono.
3. Crea le chiavi: una chiave per il browser limitata ai tuoi domini (incluso il dominio di anteprima mentre costruisci) e, se serve, una chiave lato server per la geocodifica.
4. Conserva le chiavi come segreti e chiedi al tuo builder di usarle; la chiave del browser resta comunque limitata, anche se finisce nella pagina.
5. Memorizza le coordinate di ogni luogo nel database.
6. Costruisci la mappa: marcatori, popup, clustering e uno zoom predefinito sensato.
7. Abbinala a un elenco. Una mappa da sola è difficile da usare su smartphone e per gli screen reader. Mostra gli stessi risultati come elenco.
8. Imposta un avviso di budget nella console del fornitore.
9. Pubblica e verifica sul dominio live, perché le restrizioni per referrer spesso bloccano la mappa finché non aggiungi il dominio live.

Errori comuni

• Chiavi senza restrizioni. Chiunque può riutilizzarle sul proprio sito.
• Geocodifica a ogni visualizzazione della pagina. Lenta e costosa; geocodifica una volta sola al salvataggio.
• Dimenticare il dominio live nelle restrizioni della chiave. Funziona in anteprima, riquadro grigio vuoto in produzione.
• Layout solo mappa. I segnaposto senza elenco sono scomodi su schermi piccoli e non accessibili.
• Centinaia di marcatori senza clustering. Illeggibili e lenti.
• Attribuzione mancante. La maggior parte dei fornitori di mappe e tile la richiede, e nasconderla viola i loro termini.
• Chiedere la posizione al caricamento della pagina. Chiedila solo quando l'utente tocca «Vicino a me».

Checklist

• Scelto il tipo di mappa giusto per il lavoro
• Chiave del browser limitata ai tuoi domini e alle API necessarie
• Chiavi lato server conservate nei segreti
• Coordinate memorizzate nel database, geocodificate una volta sola
• Risultati mostrati anche come elenco
• Clustering per molti marcatori
• Attribuzione visibile
• Avviso di budget impostato presso il fornitore
• Verificato sul dominio pubblicato e su smartphone

Aggiungere mappe con Mythex

Mythex non ha un'integrazione di mappe integrata; porti la tua chiave del fornitore, la aggiungi come segreto del progetto (oppure la incolli quando l'agente mostra una scheda dei segreti) e chiedi la mappa in chat, come descritto in Integrare qualsiasi API. Le coordinate vanno nel database del progetto. Ricordati di aggiungere sia il dominio di anteprima sia quello pubblicato alle restrizioni per sito web della chiave, e pubblica di nuovo dopo aver cambiato i segreti.

Le mappe di solito stanno accanto a ricerca e annunci: vedi come aggiungere la ricerca alla tua app, come costruire un sito directory e come costruire il sito di una piccola attività.

Domande