Maps API ile Store Locator Nasıl Yapılır?

Store locator, yani mağaza bulucu, birden fazla şubesi olan her işletmenin er ya da geç ihtiyaç duyduğu küçük özelliktir: bir posta kodunu haritada kısa ve sıralı bir mağaza listesine çeviren "en yakın mağazanı bul" kutusu. Dışarıdan bakınca basit görünür ve mutlu senaryo gerçekten de basittir, ama iyi bir store locator sessizce üç işi iyi yapar: dağınık konum girdisini anlar, şubeleri gerçek yakınlığa göre sıralar ve sonucu bir insanın aksiyon alabileceği bir haritada render eder.

Bu rehber, bir store locator'ın gerçekte nasıl çalıştığını, maps API ile dört adımda nasıl yapıldığını ve bir demoyu canlıya çıkarılabilir bir şeyden ayıran detayları anlatıyor. Bu makaledeki her harita bizzat MapAtlas API ile render edildi.

Store Locator Gerçekte Ne Yapar

Stil katmanını soyun, geriye üç aşamalı bir pipeline kalır:

1. Geocode: ziyaretçinin girdisi. "1012 Amsterdam", "SW1A 1AA" veya paylaşılan bir GPS konumu, hepsinin tek bir enlem ve boylama dönüşmesi gerekir.
2. Yakın sıralama: mağazalar. Bu koordinat ve şube listeniz verildiğinde, makul bir yarıçap içindeki en yakınları bulun.
3. Render: sonuçlar. Sıralanmış mağazaları haritaya marker olarak koyun; her biri adres, çalışma saatleri ve yol tarifi bağlantısı taşısın.

Aşağıdaki harita tam olarak bu üçüncü aşama, MapAtlas tile'larıyla render edildi: Amsterdam merkezinde ziyaretçiye olan mesafeye göre pinlenmiş altı şube. Burada bunlar süpermarket, ama marker'lar ister bir POI veri setinden ister kendi mağaza listenizden gelsin harita birebir aynı.

Renk sırası, sıralamanın kendisi. Ziyaretçi haritanın merkezinden arama yaptı ve marker'lar en yakın şubeleri sırayla, en yakından başlayarak gösteriyor.

Adım 1: Ziyaretçinin Girdisini Geocode Edin

Ziyaretçi bir posta kodu, şehir veya tam adres yazar, sizin ise bir koordinata ihtiyacınız vardır. Bu, forward geocoding'dir.

// 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"

Burada iki detay önemli. "Cambridge" doğru şehre çözümlensin diye hizmet bölgenize yakın bir focus.point geçin ve ziyaretçinin yazmak yerine cihaz GPS'ini paylaştığı durumu ele alın: o zaman koordinat zaten elinizdedir ve bu adımı tamamen atlarsınız.

Adım 2: Mağazalarınızı Mesafeye Göre Sıralayın

Artık ziyaretçinin koordinatı elinizde. Mağazaların kendisi zaten sizin verinizdir: veritabanınızda yaşayan, her birinin enlem ve boylamı olan bir şube listesi. Bunları sıralamak kuş uçuşu (haversine) bir mesafe hesabıdır, API çağrısı gerekmez:

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

Temel bir locator'ın ihtiyacı bu kadar. Büyük bir ağda önce ziyaretçinin etrafındaki bir bounding box'a göre filtrelersiniz ki her istekte her şubeye mesafe ölçmeyesiniz, sonra kalanları sıralarsınız. Çıktı, her birinde bir distance_m olan kısa bir en yakın şube listesidir.

Adım 3: Önce Mesafeye Göre Sıralayın, Sonra Seyahat Süresiyle İnceltin

Kuş uçuşu mesafe doğru varsayılandır. Hızlıdır, ekstra çağrı gerektirmez ve yoğun bir ağda genellikle doğrudur. Ama kuş uçuşu en yakın mağaza her zaman en hızlı ulaşılan değildir: nehrin karşısında 400 metre ötedeki bir mağaza, en yakın köprüye kadar on dakikalık bir sapma olabilir.

"En yakın"ın gerçekten "en hızlı ulaşılan" anlamına geldiği bir locator için, ilk birkaç adayı directions veya matrix çağrısıyla gerçek seyahat süresine göre yeniden sıralayın:

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

Bunu yalnızca en yakın birkaç aday için yaparsınız, yani tek ve ucuz bir çağrı olarak kalır, mağaza başına bir çağrı değil.

Adım 4: Mağazaları Haritada Render Edin

Son adım haritanın kendisi. Sıralanan her mağaza için bir marker bırakın, adres ve çalışma saatlerini içeren bir popup ekleyin ve görünümü her sonuç görünecek şekilde çerçeveleyin. Tile'ları, geocoding'i ve aramayı tek sağlayıcıdan sunan bir maps API ile locator'ın tamamı baştan sona tek tedarikçi ve tek koordinat sistemi olur; makalenin başındaki harita da bunun üzerine kurulu.

Her marker'a ziyaretçinin aksiyon alması için gereken temel bilgileri taşıyan bir popup verin: isim, adres, mesafe, çalışma saatleri ve koordinatı bir rota motoruna devreden bir "Yol Tarifi" bağlantısı.

Bir Demoyu Üretimden Ayıran Detaylar

Boş sonuçlar. Biri hiç şubenizin olmadığı bir bölgeden arama yapar. Yarıçapı otomatik genişletmeye mi, ne kadar uzakta olursa olsun tek bir en yakın mağazayı göstermeye mi, yoksa dürüstçe "50 km içinde mağaza yok" demeye mi karar verin, hem de baştan.

Çalışma saatleri. Kapalı bir dükkânı en yakın seçenek diye gösteren bir locator can sıkar. Çalışma saatlerine göre filtreleyin veya işaretleyin ki "şu an açık" birinci sınıf bir seçenek olsun.

Belirsiz girdi. "Cambridge" hem İngiltere'de hem Massachusetts'te var; "Springfield" onlarca kez tekrarlanıyor. Geocode adımında ülke önyargısı bunun büyük kısmını temizler, ziyaretçi yazarken autocomplete sunmak da geri kalanını.

Mobil GPS ve izin. Mobilde en güçlü deneyim "konumumu kullan" butonudur, ama cihaz GPS'ini okumak konum verisidir ve izin gerektirir. Önce sorun, ziyaretçi reddederse metin girişine geri düşün.

Gizlilik. Ziyaretçinin konumu, kendisine bağlandığı anda kişisel veridir. Talep anında geocode edin, ham koordinatı saklamaktan kaçının ve konumun AEA dışına çıkmaması için AB merkezli bir API kullanın. Tam tablo için GDPR uyumlu haritalar rehberimize bakın.

MapAtlas ile Store Locator Kurmak

MapAtlas tüm pipeline'ı tek API ve tek koordinat sisteminden verir. Geocoding API posta kodlarını ve şehirleri ülke önyargısıyla koordinata çevirir; kendi şube listenizi bu koordinata karşı sıralarsınız; Directions ve Matrix API'leri ilk adayları gerçek seyahat süresine göre yeniden sıralar; Dynamic Maps tile'ları da sonucu tam olarak bu makaledeki gibi render eder. Her şey varsayılan olarak AB içinde çalıştığı için ziyaretçinin konumu AEA'da kalır, bu da locator'ı ekstra iş yapmadan GDPR uyumlu tutar.

Her endpoint için tam request ve response formatları MapAtlas API dokümantasyonunda. Locator'ın yalnızca kendi şubelerinizi değil, ziyaretçinin çevresindeki ilgi noktalarını da keşfetmesini istiyorsanız Search API de bakmaya değer.

Store locator, içinde epeyce sessiz muhakeme barındıran küçük bir özellik: belirsiz girdiyi anlamak, gerçek yakınlığa göre sıralamak ve bir konumun kişisel veri olduğu gerçeğine saygı duymak. Bu üçünü doğru yapın, "en yakın mağazanı bul" kutusu sonradan akla gelen bir ayrıntı olmaktan çıkıp sitenizin en çok kullanılan şeylerinden biri olmaya başlasın.