Com afegir mapes a la teva app: incrustacions, mapes interactius i localitzadors de botigues

Per afegir un mapa a la teva app, primer decideix si necessites una incrustació estàtica (un sol lloc amb un marcador, com «troba la nostra botiga») o un mapa interactiu (molts marcadors a partir de les teves dades, filtres, agrupació, «a prop meu»). Per a una sola ubicació, un mapa incrustat és el més ràpid i, amb l'API Maps Embed de Google, gratuït. Per a mapes interactius, usa una biblioteca de mapes en JavaScript (l'API de Google Maps JavaScript, Mapbox GL JS, o Leaflet de codi obert amb un proveïdor de tessel·les), guarda la latitud i la longitud de cada lloc a la teva base de dades i restringeix la teva clau d'API al teu propi domini. Els detalls dels proveïdors que hi ha a sota són de la seva pròpia documentació a setembre de 2026.

Quin tipus de mapa necessites?

La majoria de llocs de petites empreses només necessiten la primera fila. Els directoris, els mercats i els llocs de llistats necessiten la tercera i la quarta.

Les teves opcions

Google Maps Platform

La guia d'inici de Google diu que has de crear un projecte de Cloud amb facturació activada i activar les APIs que vulguis. El seu preu de pagament segons ús dona als SKU Essentials, incloent Dynamic Maps, un límit gratuït de 10.000 esdeveniments mensuals, i indica Dynamic Maps a 7,00 $ per cada 1.000 esdeveniments per sobre d'aquest límit (al primer nivell de volum). El SKU de Maps Embed figura com a il·limitat i gratuït. Google també ven plans de subscripció mensual. Consulta els preus de Google Maps Platform per als números actuals.

Mapbox

La pàgina de preus de Mapbox indica 50.000 càrregues de mapa mensuals gratuïtes per a Mapbox GL JS a la web, després 5,00 $ per cada 1.000 càrregues. Consulta els preus de Mapbox.

Leaflet i OpenStreetMap

Leaflet es descriu com una biblioteca JavaScript de codi obert per a mapes interactius adaptats a mòbils, d'uns 42 KB de JavaScript. Necessita tessel·les de mapa (les imatges del mapa) d'algun lloc. Els servidors públics de tessel·les d'OpenStreetMap són temptadors, però la política d'ús de tessel·les exigeix una atribució visible, prohibeix descarregar-les en massa, no ofereix cap garantia de servei i avisa que els serveis comercials poden perdre l'accés. Per a un producte real, usa una font de tessel·les comercial o autoallotjada que funcioni amb Leaflet.

Claus d'API: públiques, però restringides

Les claus de mapa usades al navegador són visibles per a qualsevol que obri la teva pàgina. Això és previsible, però vol dir que algú pot copiar la teva clau i fer córrer l'ús a la teva factura. La guia de seguretat de Google és afegir restriccions de lloc web (referrer HTTP) amb els teus dominis, i restriccions d'API perquè la clau només funcioni per a les APIs que uses.

Les claus per a serveis del servidor (per exemple, geocodificar milers d'adreces) han de ser claus separades, guardades com a secrets del servidor, no a la pàgina. Configura també alertes de pressupost o quotes a la consola del proveïdor perquè un error no es converteixi en una factura gran.

Geocodificació: converteix les adreces en coordenades una sola vegada

Els mapes representen latitud i longitud, no adreces. Convertir una adreça en coordenades es diu geocodificació, i la majoria de proveïdors la cobren per petició. El patró eficient:

1. Quan es desa un anunci, geocodifica la seva adreça al servidor.
2. Guarda la latitud i la longitud a la base de dades.
3. El mapa llegeix les coordenades guardades; mai no geocodifica en veure la pàgina.

Comprova les condicions de cada proveïdor sobre quant de temps pots guardar els resultats de geocodificació; són diferents.

Prompts d'exemple

Un mapa incrustat:

A la pàgina de Contacte, afegeix un mapa de Google incrustat que mostri la nostra adreça (12 High Street, Leeds) usant l'API Maps Embed amb la clau a GOOGLE_MAPS_EMBED_KEY. Afegeix un enllaç «Com arribar-hi» a sota. Fes-lo d'amplada completa als telèfons i carrega'l de manera diferida.

Un mapa interactiu d'anuncis:

Afegeix latitud i longitud a la taula d'anuncis. Quan es crea un anunci o canvia la seva adreça, geocodifica-la al servidor amb la clau a GEOCODING_API_KEY i desa les coordenades. A la pàgina Explorar, mostra un mapa amb un marcador per anunci usant Leaflet, amb agrupació quan els marcadors se superposin. En fer clic a un marcador es mostren el títol, el preu i un enllaç. El mapa i la llista han d'usar els mateixos filtres.

«A prop meu»:

Afegeix un botó «A prop meu» que demani la ubicació del visitant i mostri els anuncis a menys de 10 km, ordenats per distància. Si rebutgen l'accés a la ubicació, deixa que escriguin una ciutat.

Pas a pas

1. Tria el tipus de mapa de la taula de dalt.
2. Crea el compte del proveïdor i un projecte, i activa només les APIs que necessitis.
3. Crea les claus: una clau del navegador restringida als teus dominis (incloent el domini de vista prèvia mentre construeixes) i, si cal, una clau de servidor per a la geocodificació.
4. Guarda les claus com a secrets i demana al teu constructor que les usi; la clau del navegador segueix restringida encara que acabi a la pàgina.
5. Guarda les coordenades de cada lloc a la teva base de dades.
6. Construeix el mapa: marcadors, finestres emergents, agrupació i un zoom per defecte raonable.
7. Acompanya-ho amb una llista. Un mapa sol és difícil d'usar en un telèfon i per a lectors de pantalla. Mostra els mateixos resultats com a llista.
8. Fixa una alerta de pressupost a la consola del proveïdor.
9. Publica i prova al domini en viu, ja que les restriccions de referrer sovint bloquegen el mapa fins que s'afegeix el domini en viu.

Errors habituals

• Claus sense restriccions. Qualsevol pot reutilitzar-les al seu propi lloc.
• Geocodificar en cada visualització de pàgina. Lent i car; geocodifica una vegada en desar.
• Oblidar el domini en viu a les restriccions de la clau. Funciona a la vista prèvia, però és un quadre gris en blanc en producció.
• Dissenys només amb el mapa. Els marcadors sense llista són penosos en pantalles petites i inaccessibles.
• Centenars de marcadors sense agrupació. Il·legibles i lents.
• Manca d'atribució. La majoria de proveïdors de mapes i de tessel·les la exigeixen, i amagar-la trenca les seves condicions.
• Demanar la ubicació en carregar la pàgina. Demana-la només quan l'usuari toqui «A prop meu».

Llista de comprovació

• Triat el tipus de mapa adequat per a la feina
• Clau del navegador restringida als teus dominis i a les APIs necessàries
• Claus de servidor guardades als secrets
• Coordenades guardades a la base de dades, geocodificades una sola vegada
• Resultats també mostrats com a llista
• Agrupació per a molts marcadors
• Atribució visible
• Alerta de pressupost configurada amb el proveïdor
• Provat al domini publicat i en un telèfon

Afegir mapes amb Mythex

Mythex no té una integració de mapes integrada; portes la teva pròpia clau de proveïdor, l'afegeixes com a secret del projecte (o l'enganxes quan l'agent mostri una targeta de secrets) i demanes el mapa al xat, tal com es descriu a Integrar qualsevol API. Les coordenades van a la base de dades del projecte. Recorda afegir tant el domini de vista prèvia com el publicat a les restriccions de referrer de la clau, i torna a publicar després de canviar els secrets.

Els mapes solen anar al costat de la cerca i dels llistats: consulta com afegir cerca a la teva app, com construir un lloc web de directori i com construir un lloc web per a una petita empresa.

Preguntes