Cara Membuat Store Locator dengan Maps API

Store locator adalah fitur kecil yang cepat atau lambat dibutuhkan setiap bisnis dengan banyak cabang: kotak "cari toko terdekat" yang mengubah sebuah kode pos menjadi daftar toko yang pendek dan terurut di atas peta. Dari luar tampak sepele, dan happy path-nya memang sederhana, tetapi locator yang bagus diam-diam mengerjakan tiga hal dengan baik: memahami input lokasi yang berantakan, mengurutkan cabang berdasarkan kedekatan yang sebenarnya, dan menampilkan hasilnya di peta yang bisa ditindaklanjuti manusia.

Panduan ini membahas bagaimana store locator sebenarnya bekerja, empat langkah membuatnya dengan maps API, dan detail yang membedakan sebuah demo dari sesuatu yang layak Anda rilis. Setiap peta di artikel ini dirender dengan MapAtlas API itu sendiri.

Apa yang Sebenarnya Dikerjakan Store Locator

Lepaskan stylingnya dan store locator adalah pipeline dengan tiga tahap:

1. Geocode input pengunjung. "1012 Amsterdam", "SW1A 1AA", atau posisi GPS yang dibagikan, semuanya harus menjadi satu latitude dan longitude.
2. Urutkan toko terdekat. Dengan koordinat itu dan daftar lokasi cabang Anda, temukan yang paling dekat dalam radius yang masuk akal.
3. Render hasilnya. Taruh toko yang sudah terurut di peta sebagai marker, masing-masing dengan alamat, jam buka, dan link ke petunjuk arah.

Peta di bawah ini persis tahap ketiga itu, dirender dengan tiles MapAtlas: enam cabang di pusat Amsterdam yang ditandai berdasarkan jarak dari pengunjung. Di sini kebetulan supermarket, tetapi petanya identik entah marker-nya berasal dari dataset POI atau dari daftar toko Anda sendiri.

Urutan warnanya adalah rankingnya. Pengunjung mencari dari titik tengah peta, dan marker-nya adalah cabang terdekat secara berurutan, yang paling dekat lebih dulu.

Langkah 1: Geocode Input Pengunjung

Pengunjung mengetik kode pos, kota, atau alamat lengkap, dan Anda butuh koordinat. Itulah 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"

Ada dua detail penting di sini. Kirim focus.point yang dekat dengan area layanan Anda supaya "Cambridge" resolve ke yang benar, dan tangani kasus ketika pengunjung membagikan GPS perangkat alih-alih mengetik: saat itu koordinatnya sudah Anda punya dan langkah ini dilewati sepenuhnya.

Langkah 2: Urutkan Toko Anda Berdasarkan Jarak

Sekarang Anda punya koordinat pengunjung. Tokonya sendiri adalah data Anda: daftar cabang, masing-masing dengan latitude dan longitude, yang tinggal di database Anda. Mengurutkannya adalah perhitungan jarak garis lurus (haversine), tanpa perlu API call:

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

Hanya itu yang dibutuhkan locator dasar. Untuk jaringan besar, Anda akan memfilter dulu ke bounding box di sekitar pengunjung supaya tidak mengukur jarak ke setiap cabang pada setiap request, lalu mengurutkan yang tersisa. Outputnya adalah daftar pendek cabang terdekat, masing-masing dengan distance_m.

Langkah 3: Urutkan Berdasarkan Jarak, lalu Perhalus dengan Waktu Tempuh

Jarak garis lurus adalah default yang tepat. Cepat, tidak butuh call tambahan, dan untuk jaringan yang padat biasanya sudah benar. Tetapi toko terdekat secara garis lurus tidak selalu paling cepat dicapai: toko yang berjarak 400 meter di seberang sungai bisa berarti memutar sepuluh menit ke jembatan terdekat.

Untuk locator yang "terdekat"-nya benar-benar berarti "tercepat dijangkau", urutkan ulang beberapa kandidat teratas berdasarkan waktu tempuh nyata dengan call directions atau 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);

Anda hanya melakukan ini untuk segelintir kandidat terdekat, jadi tetap satu call murah, bukan satu call per toko.

Langkah 4: Render Toko di Peta

Langkah terakhir adalah petanya sendiri. Taruh marker untuk setiap toko yang sudah terurut, tambahkan popup berisi alamat dan jam buka, lalu atur framing view supaya semua hasil terlihat. Dengan maps API yang menyajikan tiles, geocoding, dan search dari satu provider, seluruh locator berjalan pada satu vendor dan satu sistem koordinat dari ujung ke ujung, dan itulah dasar peta di awal artikel ini.

Beri setiap marker popup berisi hal-hal esensial yang dibutuhkan pengunjung untuk bertindak: nama, alamat, jarak, jam buka, dan link "Petunjuk arah" yang menyerahkan koordinat ke routing engine.

Detail yang Membedakan Demo dari Production

Hasil kosong. Ada yang mencari dari wilayah tempat Anda tidak punya cabang sama sekali. Putuskan sejak awal apakah radius akan diperlebar otomatis, menampilkan satu toko terdekat sejauh apa pun jaraknya, atau berkata jujur "tidak ada toko dalam radius 50 km".

Jam buka. Locator yang menampilkan toko sebagai opsi terdekat padahal sedang tutup itu menjengkelkan. Filter atau tandai berdasarkan jam buka supaya "buka sekarang" jadi opsi kelas satu.

Input ambigu. "Cambridge" ada di Inggris dan di Massachusetts; "Springfield" ada puluhan kali. Country biasing pada langkah geocode menghilangkan sebagian besar masalah ini, dan menawarkan autocomplete saat pengunjung mengetik menghilangkan sisanya.

GPS mobile dan consent. Di mobile, pengalaman terkuat adalah tombol "gunakan lokasi saya", tetapi membaca GPS perangkat adalah data lokasi dan butuh consent. Tanya dulu, dan sediakan input teks sebagai fallback jika pengunjung menolak.

Privasi. Lokasi pengunjung menjadi data pribadi begitu ia terkait dengan orangnya. Lakukan geocode on demand, hindari menyimpan koordinat mentahnya, dan pakai API berbasis Uni Eropa supaya lokasi tidak pernah meninggalkan EEA. Lihat panduan kami tentang peta yang patuh GDPR untuk gambaran lengkapnya.

Membangun Store Locator dengan MapAtlas

MapAtlas memberi Anda seluruh pipeline dari satu API dan satu sistem koordinat. Geocoding API mengubah kode pos dan kota menjadi koordinat lengkap dengan country biasing; Anda mengurutkan daftar cabang Anda sendiri terhadap koordinat itu; Directions dan Matrix API mengurutkan ulang kandidat teratas berdasarkan waktu tempuh nyata; dan tiles Dynamic Maps merender hasilnya, persis seperti yang ditampilkan di artikel ini. Karena semuanya berjalan di dalam Uni Eropa secara default, lokasi pengunjung tetap di EEA, yang membuat locator patuh GDPR tanpa kerja tambahan.

Format request dan response lengkap untuk setiap endpoint ada di dokumentasi API MapAtlas. Search API juga layak dilihat jika Anda ingin locator-nya menemukan points of interest di sekitar pengunjung, bukan hanya cabang Anda sendiri.

Store locator adalah fitur kecil dengan banyak pertimbangan diam di dalamnya: memahami input yang samar, mengurutkan berdasarkan kedekatan yang sebenarnya, dan menghormati fakta bahwa lokasi adalah data pribadi. Benarkan ketiganya dan kotak "cari toko terdekat" berhenti menjadi pikiran belakangan lalu berubah menjadi salah satu hal yang paling sering dipakai di situs Anda.