Un store locator es esa pequeña función que todo negocio con varias sucursales acaba necesitando: el buscador de tiendas que convierte un código postal en una lista corta y ordenada de locales sobre un mapa. Desde fuera parece trivial, y el happy path es genuinamente simple, pero uno bueno hace tres trabajos bien y sin hacer ruido: entiende entradas de ubicación desordenadas, ordena las sucursales por cercanía real y renderiza el resultado en un mapa sobre el que una persona puede actuar.
Esta guía recorre cómo funciona de verdad un store locator, los cuatro pasos para construir uno con una API de mapas y los detalles que separan una demo de algo que enviarías a producción. Cada mapa de este artículo está renderizado con la propia API de MapAtlas.
Qué hace realmente un store locator
Quita el estilado y un buscador de tiendas es un pipeline de tres etapas:
- Geocodificar la entrada del visitante. «1012 Amsterdam», «SW1A 1AA» o una posición GPS compartida tienen que convertirse en una única latitud y longitud.
- Ordenar por cercanía las tiendas. Dada esa coordenada y tu lista de sucursales, encuentra las más próximas dentro de un radio sensato.
- Renderizar los resultados. Pon las tiendas ordenadas en un mapa como marcadores, cada una con su dirección, su horario y un enlace a la ruta.
El mapa de abajo es exactamente esa tercera etapa, renderizado con tiles de MapAtlas: seis sucursales en el centro de Ámsterdam marcadas por distancia desde el visitante. Aquí son supermercados, pero el mapa es idéntico tanto si los marcadores vienen de un dataset de POIs como de tu propia lista de tiendas.
El orden de los colores es el ranking. El visitante buscó desde el centro del mapa, y los marcadores son las sucursales más próximas en orden, la más cercana primero.
Paso 1: geocodifica la entrada del visitante
El visitante escribe un código postal, una ciudad o una dirección completa, y tú necesitas una coordenada. Eso es forward geocoding.
// Turn what the visitor types into a coordinate (autocomplete geocoding)
const res = await fetch(
`https://gateway.mapmetrics-atlas.net/autocomplete/` +
`?token=${API_TOKEN}&text=${encodeURIComponent(query)}` +
`&focus.point.lat=52.37&focus.point.lon=4.89` // bias toward your service area
);
const { features } = await res.json();
const [lon, lat] = features[0].geometry.coordinates; // [lon, lat]
const label = features[0].properties.label; // "Damrak, Amsterdam, North Holland, Netherlands"
Aquí importan dos detalles. Pasa un focus.point cerca de tu área de servicio para que «Cambridge» resuelva a la correcta, y contempla el caso en que el visitante comparte el GPS del dispositivo en vez de escribir: entonces ya tienes la coordenada y te saltas este paso por completo.
Paso 2: ordena tus tiendas por distancia
Ya tienes la coordenada del visitante. Las tiendas en sí son tus propios datos: una lista de sucursales, cada una con su latitud y longitud, que vive en tu base de datos. Ordenarlas es un cálculo de distancia en línea recta (haversine), sin necesidad de ninguna llamada a la API:
// Your branches, each with a lat/lon. Rank by distance from the visitor.
const ranked = stores
.map(s => ({ ...s, distance_m: haversine(lat, lon, s.lat, s.lon) }))
.sort((a, b) => a.distance_m - b.distance_m)
.slice(0, 6);
Eso es todo lo que necesita un locator básico. Para una red grande, primero filtrarías por un bounding box alrededor del visitante para no medir la distancia a cada sucursal en cada request, y luego ordenarías las supervivientes. La salida es una lista corta de las sucursales más próximas, cada una con su distance_m.
Paso 3: ordena por distancia y luego refina por tiempo de viaje
La distancia en línea recta es el default correcto. Es rápida, no necesita llamadas extra y para una red densa suele ser correcta. Pero la tienda más cercana a vuelo de pájaro no siempre es la más rápida de alcanzar: un local a 400 metros al otro lado de un río puede ser un rodeo de diez minutos hasta el puente más próximo.
Para un locator donde «la más cercana» signifique de verdad «la más rápida de alcanzar», reordena los pocos primeros candidatos por tiempo de viaje real con una llamada a directions o a matrix:
// Re-rank the closest stores by real drive time (MapAtlas Matrix API)
const res = await fetch(`https://gateway.mapmetrics-atlas.net/matrix/?token=${API_TOKEN}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
sources: [{ lat, lon }],
targets: top3.map(s => ({ lat: s.lat, lon: s.lon })),
costing: 'auto', // 'auto' | 'bicycle' | 'pedestrian'
}),
});
const { sources_to_targets } = await res.json();
const row = sources_to_targets[0]; // one entry per target, each with .time (seconds)
const byTime = top3
.map((s, i) => ({ ...s, time: row[i].time }))
.sort((a, b) => a.time - b.time);
Esto solo lo haces para el puñado de candidatos más cercanos, así que sigue siendo una única llamada barata, no una por tienda.
Paso 4: renderiza las tiendas en un mapa
El último paso es el mapa. Suelta un marcador por cada tienda ordenada, añade un popup con la dirección y el horario, y encuadra la vista para que todos los resultados sean visibles. Con una API de mapas que sirva tiles, geocoding y búsqueda desde un mismo proveedor, todo el locator es un solo vendor y un solo sistema de coordenadas de punta a punta, que es sobre lo que está construido el mapa de más arriba.
Dale a cada marcador un popup con lo esencial que el visitante necesita para actuar: nombre, dirección, distancia, horario y un enlace de «Cómo llegar» que pase la coordenada a un motor de routing.
Detalles que separan una demo de producción
Resultados vacíos. Alguien busca desde una región donde no tienes sucursales. Decide de antemano si ampliar el radio automáticamente, mostrar la única tienda más cercana por lejos que esté, o decir honestamente «no hay tiendas en 50 km».
Horarios. Un locator que muestra una tienda como la opción más cercana cuando está cerrada frustra. Filtra o marca por horario para que «abierto ahora» sea una opción de primera clase.
Entradas ambiguas. «Cambridge» existe en Inglaterra y en Massachusetts; «Springfield» existe decenas de veces. El sesgo por país en el paso de geocoding elimina casi todo esto, y ofrecer autocomplete mientras el visitante escribe elimina el resto.
GPS móvil y consentimiento. En móvil, la mejor experiencia es el botón de «usar mi ubicación», pero leer el GPS del dispositivo son datos de ubicación y requiere consentimiento. Pregunta primero, y cae de vuelta a la entrada de texto si el visitante se niega.
Privacidad. La ubicación del visitante es un dato personal en el momento en que se vincula a él. Geocodifica bajo demanda, evita almacenar la coordenada en bruto y usa una API con base en la UE para que la ubicación nunca salga del EEE. Consulta nuestra guía de mapas conformes con RGPD para el panorama completo.
Construir un store locator con MapAtlas
MapAtlas te da el pipeline completo desde una sola API y un solo sistema de coordenadas. La Geocoding API convierte códigos postales y ciudades en coordenadas con sesgo por país; tú ordenas tu propia lista de sucursales contra esa coordenada; las APIs de Directions y Matrix reordenan los primeros candidatos por tiempo de viaje real; y los tiles de Dynamic Maps renderizan el resultado, exactamente como se ve en este artículo. Como todo corre dentro de la UE por defecto, la ubicación del visitante se queda en el EEE, lo que mantiene el locator conforme con RGPD sin trabajo extra.
Los formatos completos de request y response de cada endpoint están en la documentación de la API de MapAtlas. La Search API también merece un vistazo si quieres que el locator descubra puntos de interés alrededor del visitante, y no solo tus propias sucursales.
Un store locator es una función pequeña con mucho criterio silencioso dentro: entender entradas vagas, ordenar por cercanía genuina y respetar el hecho de que una ubicación es un dato personal. Acierta en esas tres cosas y el buscador de tiendas deja de ser algo secundario para convertirse en una de las cosas más usadas de tu web.
Preguntas frecuentes
¿Qué es un store locator?
Un store locator, o buscador de tiendas, es la función de «encuentra tu tienda más cercana» que aparece en webs de retail y de servicios. El visitante escribe un código postal o una ciudad, o comparte su ubicación, y el locator devuelve las sucursales más próximas ordenadas por distancia, cada una marcada en un mapa con su dirección, su horario y un enlace a la ruta. Por debajo son tres pasos: geocodificar la entrada a una coordenada, lanzar una búsqueda por cercanía contra tu lista de tiendas y renderizar los resultados en un mapa.
¿Cómo se construye un store locator?
En cuatro pasos. Primero, geocodifica lo que escribe el visitante (código postal o ciudad) para obtener una latitud y una longitud con una API de geocoding. Segundo, lanza una consulta por radio o de vecino más cercano contra las coordenadas de tus tiendas para sacar las sucursales más próximas. Tercero, ordena esos resultados por distancia y, si quieres, por tiempo de viaje. Cuarto, renderiza las tiendas ordenadas como marcadores en un mapa con sus popups. Una API de mapas que ofrezca geocoding, búsqueda por cercanía y tiles desde un mismo proveedor te permite cubrir los cuatro pasos sin coser servicios entre sí.
¿Necesito una API de store locator?
Necesitas geocoding, tiles de mapa y normalmente un ranking por tiempo de viaje; la lista de tiendas en sí son tus propios datos. Puedes hardcodear una lista corta de tiendas y calcular la distancia en línea recta por tu cuenta, pero en cuanto quieras búsqueda por código postal, orden por tiempo de conducción y un mapa renderizado, una API que combine geocoding, matrix y render de mapas desde un solo proveedor te ahorra cablear tres vendors y reconciliar sus formatos de coordenadas.
¿Cómo ordena un store locator las tiendas más cercanas?
El ranking más simple es la distancia en línea recta (círculo máximo) desde la coordenada del visitante hasta cada tienda, ordenada de menor a mayor. Es rápido y suficiente para redes urbanas densas. Para una mejor experiencia, reordena los primeros candidatos por tiempo de viaje real usando una API de directions o de matrix, porque la tienda más cercana a vuelo de pájaro no siempre es la más rápida de alcanzar cuando entran en juego ríos, autopistas y calles de sentido único.
¿Un store locator cumple con RGPD?
Puede cumplirlo, y si el visitante está en la UE tiene que hacerlo. Un buscador de tiendas procesa una ubicación, que es un dato personal en cuanto se vincula a un usuario. Para mantenerlo conforme: geocodifica bajo demanda en vez de almacenar la coordenada del visitante, usa una API de mapas con base en la UE para que la ubicación nunca salga del EEE, y pide consentimiento antes de leer el GPS del dispositivo. MapAtlas procesa las consultas de ubicación dentro de la UE por defecto.
