地図APIで店舗検索を作る方法: ジオコーディングから地図描画まで

店舗検索は、複数店舗を展開するビジネスが最終的に必ず必要になる小さな機能です。郵便番号を、地図上の短い店舗ランキングに変える「最寄り店舗を探す」ボックスのことですね。外から見ると些細に見えますし、ハッピーパスは実際シンプルです。しかし良い店舗検索は、3つの仕事を静かにこなしています。雑然とした位置入力を理解すること、実際の近さで店舗を順位付けすること、そして人が行動に移せる地図として結果を描画することです。

このガイドでは、店舗検索が実際にどう動くのか、地図APIで作る4つのステップ、そしてデモと本番運用できるものを分ける細部を解説します。本記事のすべての地図は、MapAtlas API自体で描画しています。

店舗検索が実際にやっていること

スタイリングを剥ぎ取ると、店舗検索は3段階のパイプラインです:

1. 訪問者の入力をジオコーディングする。「1012 Amsterdam」も「SW1A 1AA」も共有されたGPS位置も、すべて単一の緯度経度にならなければなりません。
2. 近隣店舗を順位付けする。その座標と自社の店舗位置リストから、妥当な半径内で最寄りのものを見つけます。
3. 結果を描画する。並べ替えた店舗を地図上にマーカーとして置き、それぞれに住所、営業時間、経路リンクを付けます。

下の地図はまさにその第3段階を、MapAtlasのタイルで描画したものです。アムステルダム中心部の6店舗が、訪問者からの距離順にピン表示されています。ここではスーパーマーケットですが、マーカーがPOIデータセット由来でも自社の店舗リスト由来でも、地図は同じです。

色の順番がそのまま順位です。訪問者は地図の中心から検索しており、マーカーは近い順に並んだ最寄り店舗です。

ステップ1: 訪問者の入力をジオコーディングする

訪問者は郵便番号、市区町村、あるいは完全な住所を入力し、あなたは座標を必要とします。これがフォワードジオコーディングです。

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

ここで重要な点が2つあります。「Cambridge」が正しいほうに解決されるよう、サービスエリア付近のfocus.pointを渡すこと。そして訪問者が入力せずデバイスのGPSを共有するケースを扱うことです。その場合はすでに座標があるので、このステップは丸ごとスキップできます。

ステップ2: 店舗を距離で順位付けする

これで訪問者の座標が手に入りました。店舗そのものは自社データです。緯度経度を持つ店舗のリストが、あなたのデータベースにあります。順位付けは直線（haversine）距離の計算であり、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);

基本的な店舗検索に必要なのはこれだけです。大規模な店舗網では、リクエストごとに全店舗との距離を測らずに済むよう、まず訪問者の周囲のバウンディングボックスで絞り込み、残ったものを並べ替えます。出力は最寄り店舗の短いリストで、それぞれがdistance_mを持ちます。

ステップ3: 距離で並べ、所要時間で精緻化する

直線距離は正しいデフォルトです。速く、追加の呼び出しが不要で、密集した店舗網ではたいてい正解です。しかし直線距離で最も近い店舗が、最速で到達できる店舗とは限りません。川の向こう400メートルの店舗は、最寄りの橋まで10分の遠回りになることがあります。

「最寄り」が本当に「最速で行ける」を意味する店舗検索にするなら、上位数件の候補だけをdirectionsまたは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);

これは最寄り候補の数件に対してだけ行うので、店舗ごとに1回ではなく、安価な1回の呼び出しで済みます。

ステップ4: 店舗を地図に描画する

最後のステップは地図そのものです。順位付けした店舗ごとにマーカーを置き、住所と営業時間を載せたポップアップを追加し、すべての結果が見えるようにビューを調整します。タイル、ジオコーディング、検索を1つのプロバイダから提供する地図APIなら、店舗検索全体がエンドツーエンドで1ベンダー、1座標系になります。本記事の前半の地図もそれを土台にしています。

各マーカーには、訪問者が行動に移すために必要な要素をポップアップで与えましょう。店名、住所、距離、営業時間、そして座標をルーティングエンジンに渡す「経路案内」リンクです。

デモと本番を分ける細部

結果ゼロ。 店舗がない地域から検索する人がいます。半径を自動で広げるか、どれだけ遠くても最寄りの1店舗を見せるか、「50km以内に店舗はありません」と正直に伝えるかを、あらかじめ決めておきましょう。

営業時間。 閉店中の店舗を最寄りの選択肢として見せる店舗検索はストレスになります。営業時間でフィルタするかフラグを立てて、「営業中」を一級の選択肢にしましょう。

曖昧な入力。 「Cambridge」はイングランドとマサチューセッツにあり、「Springfield」は何十か所も存在します。ジオコーディング段階での国バイアスがその大半を取り除き、入力中のオートコンプリートが残りを取り除きます。

モバイルのGPSと同意。 モバイルで最も強い体験は「現在地を使う」ボタンですが、デバイスのGPSを読むことは位置データの取得であり、同意が必要です。まず尋ね、訪問者が拒否したらテキスト入力にフォールバックしましょう。

プライバシー。 訪問者の位置情報は、その人と紐づいた瞬間から個人データです。オンデマンドでジオコーディングし、生の座標の保存を避け、EU拠点のAPIを使って位置情報がEEAの外に出ないようにしましょう。全体像はGDPR準拠の地図ガイドをご覧ください。

MapAtlasで店舗検索を作る

MapAtlasは、1つのAPIと1つの座標系でパイプライン全体を提供します。Geocoding APIは国バイアス付きで郵便番号や市区町村を座標に変換し、あなたはその座標に対して自社の店舗リストを順位付けします。DirectionsとMatrixのAPIが上位候補を実際の所要時間で並べ替え直し、Dynamic Mapsのタイルが結果を描画します。本記事で示したとおりです。すべてがデフォルトでEU域内で動くため、訪問者の位置情報はEEA内に留まり、店舗検索は追加作業なしでGDPR準拠を保てます。

各エンドポイントの完全なリクエスト・レスポンス形式はMapAtlas APIドキュメントにあります。自社店舗だけでなく訪問者の周辺のPOIも発見させたい場合は、Search APIも一見の価値があります。

店舗検索は小さな機能ですが、その中には静かな判断が数多く詰まっています。曖昧な入力を理解すること、本当の近さで順位付けすること、そして位置情報が個人データであるという事実を尊重すること。この3つを正しく押さえれば、「最寄り店舗を探す」ボックスは後付けの機能であることをやめ、サイトで最もよく使われるものの1つになります。