Een Store Locator Bouwen met een Maps API

Een store locator is die kleine functie die elk bedrijf met meerdere vestigingen uiteindelijk nodig heeft: het "vind je dichtstbijzijnde winkel"-vak dat van een postcode een korte, gerangschikte lijst winkels op een kaart maakt. Van buiten lijkt het triviaal, en het happy path is ook echt simpel, maar een goede winkelzoeker doet stilletjes drie dingen goed: rommelige locatie-input begrijpen, vestigingen op echte nabijheid rangschikken, en het resultaat renderen op een kaart waar een mens iets mee kan.

Deze gids loopt door hoe een store locator daadwerkelijk werkt, de vier stappen om er een te bouwen met een maps API, en de details die een demo scheiden van iets dat je zou shippen. Elke kaart in dit artikel is gerenderd met de MapAtlas API zelf.

Wat een Store Locator Eigenlijk Doet

Haal de styling weg en een store locator is een pipeline met drie stages:

1. Geocode de input van de bezoeker. "1012 Amsterdam", "SW1A 1AA" of een gedeelde GPS-positie moeten allemaal één latitude en longitude worden.
2. Rangschik nearby winkels. Gegeven dat coördinaat en je lijst met vestigingen, vind de dichtstbijzijnde binnen een zinnige radius.
3. Render de resultaten. Zet de gerangschikte winkels als markers op een kaart, elk met adres, openingstijden en een link naar de route.

De kaart hieronder is precies die derde stage, gerenderd met MapAtlas-tiles: zes vestigingen in het centrum van Amsterdam, gepind op afstand vanaf de bezoeker. Hier zijn het supermarkten, maar de kaart is identiek of de markers nu uit een POI-dataset komen of uit je eigen winkellijst.

De kleurvolgorde is de ranking. De bezoeker zocht vanaf het midden van de kaart, en de markers zijn de dichtstbijzijnde vestigingen op volgorde, dichtstbij eerst.

Stap 1: Geocode de Input van de Bezoeker

De bezoeker typt een postcode, een plaats of een volledig adres, en jij hebt een coördinaat nodig. Dat is 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"

Twee details zijn hier belangrijk. Geef een focus.point mee dicht bij je verzorgingsgebied zodat "Cambridge" naar de juiste resolvet, en vang het geval af waarin de bezoeker device-GPS deelt in plaats van typt: dan heb je het coördinaat al en sla je deze stap helemaal over.

Stap 2: Rangschik Je Winkels op Afstand

Nu heb je het coördinaat van de bezoeker. De winkels zelf zijn je eigen data: een lijst vestigingen, elk met een latitude en longitude, die in je database staat. Ze rangschikken is een hemelsbrede (haversine) afstandsberekening, geen API-call nodig:

// 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);

Meer heeft een basic locator niet nodig. Bij een groot netwerk filter je eerst op een bounding box rond de bezoeker, zodat je niet bij elke request de afstand tot elke vestiging meet, en sorteer je daarna de overblijvers. De output is een korte lijst van de dichtstbijzijnde vestigingen, elk met een distance_m.

Stap 3: Rangschik op Afstand, Verfijn Daarna op Reistijd

Hemelsbrede afstand is de juiste default. Snel, geen extra call nodig, en voor een dicht netwerk meestal correct. Maar de hemelsbreed dichtstbijzijnde winkel is niet altijd het snelst te bereiken: een winkel op 400 meter aan de overkant van een rivier kan een omweg van tien minuten naar de dichtstbijzijnde brug zijn.

Voor een locator waar "dichtstbij" echt "snelst te bereiken" betekent, herrangschik je de paar beste kandidaten op echte reistijd met een directions- of matrix-call:

// 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);

Je doet dit alleen voor de handvol dichtstbijzijnde kandidaten, dus het blijft één goedkope call, niet één per winkel.

Stap 4: Render de Winkels op een Kaart

De laatste stap is de kaart zelf. Zet een marker voor elke gerangschikte winkel, voeg een popup toe met adres en openingstijden, en frame de view zo dat elk resultaat zichtbaar is. Met een maps API die tiles, geocoding en search van één provider serveert, is de hele locator één leverancier en één coördinatensysteem van begin tot eind, en daar is de kaart eerder in dit artikel op gebouwd.

Geef elke marker een popup met het minimum dat een bezoeker nodig heeft om te handelen: naam, adres, afstand, openingstijden en een "Route"-link die het coördinaat doorgeeft aan een routing engine.

Details Die een Demo van Productie Scheiden

Lege resultaten. Iemand zoekt vanuit een regio waar je geen vestigingen hebt. Bepaal vooraf of je de radius automatisch verruimt, de enige dichtstbijzijnde winkel toont hoe ver die ook is, of gewoon eerlijk "geen winkels binnen 50 km" zegt.

Openingstijden. Een locator die een winkel als dichtstbijzijnde optie toont terwijl die dicht is, is frustrerend. Filter of markeer op openingstijden zodat "nu open" een eersteklas optie is.

Ambigue input. "Cambridge" bestaat in Engeland en Massachusetts; "Springfield" bestaat tientallen keren. Country biasing in de geocode-stap haalt het meeste hiervan weg, en autocomplete aanbieden tijdens het typen haalt de rest weg.

Mobiele GPS en consent. Op mobiel is de "gebruik mijn locatie"-knop de sterkste ervaring, maar device-GPS uitlezen is locatiedata en vereist toestemming. Vraag het eerst, en val terug op tekstinvoer als de bezoeker weigert.

Privacy. De locatie van de bezoeker is persoonsgegeven zodra die aan hem gekoppeld is. Geocode on demand, sla het ruwe coördinaat niet op, en gebruik een EU-gebaseerde API zodat de locatie de EER nooit verlaat. Zie onze gids voor GDPR-compliant kaarten voor het volledige plaatje.

Een Store Locator Bouwen met MapAtlas

MapAtlas geeft je de hele pipeline vanuit één API en één coördinatensysteem. De Geocoding API maakt van postcodes en plaatsen coördinaten met country biasing; je rangschikt je eigen vestigingslijst tegen dat coördinaat; de Directions- en Matrix-API's herrangschikken de beste kandidaten op echte reistijd; en de Dynamic Maps-tiles renderen het resultaat, precies zoals in dit artikel te zien is. Omdat alles standaard binnen de EU draait, blijft de locatie van de bezoeker in de EER, waardoor de locator GDPR-compliant blijft zonder extra werk.

Volledige request- en responseformaten voor elk endpoint staan in de MapAtlas API-documentatie. De Search API is ook het bekijken waard als je wilt dat de locator points of interest rond de bezoeker ontdekt, niet alleen je eigen vestigingen.

Een store locator is een kleine functie met veel stille afwegingen erin: vage input begrijpen, rangschikken op echte nabijheid, en respecteren dat een locatie persoonsgegeven is. Krijg die drie goed en het "vind je dichtstbijzijnde winkel"-vak is geen bijzaak meer, maar een van de meestgebruikte dingen op je site.