ガイド

ランディングページに店舗までの距離計算機能を追加する

「最寄りの店舗は自分からどのくらい離れているか」という質問には、訪問者を別の地図に送って自分で調べさせるのではなく、ランディングページで直接答えることができます。

訪問者の入力をジオコーディングする

訪問者がシンプルなフォームの入力欄に入力した住所や郵便番号をそのままジオコーディングします。

GET /v1/forward?q=350 Fifth Avenue, New York&limit=1
{
  "status": "ok",
  "results": [
    {"formatted": "350 Fifth Avenue, New York, NY", "lat": 40.7484, "lon": -73.9857, "type": "address", "precision": "house", "confidence": 0.96, "place_id": "es234", "components": {}}
  ]
}

各店舗までの距離を計算する

訪問者の座標が手に入ったら、標準的なハーバーサインの公式を使って、その地点から各店舗までの直線距離を計算します。店舗の位置は、自分のコード内に座標の固定リストとして保持しておきます。

for store in stores:
    store.distance_km = haversine(store.lat, store.lon, 40.7484, -73.9857)

結果を表示する

計算した距離で店舗リストを並べ替え、最も近い1店舗、または近い数店舗を距離の数値とともに表示します。これはすべてフォーム送信時にサーバー側で実行されるため、クライアント側のスクリプトは一切必要ありません。ページは次の読み込み時に結果を表示するだけです。

2つ目の例:1店舗ではなく近い3店舗を表示する

最も近い1店舗だけを示すのではなく、リスト全体を並べ替えて上位3店舗を表示すると、訪問者に本当の選択肢を与えられます。これは、最寄りの店舗の営業時間や在庫が、訪問者が実際には好むかもしれない少し遠い店舗と異なる場合に特に役立ちます。並べ替えは同じ1回のリクエストで得た同じ座標に対して行うため、追加のコストはかかりません。

信頼度の低い一致を扱う

訪問者が入力した住所の信頼度スコアが低い場合は、訪問者の意図を推測したうえで距離を自信ありげに伝えるのではなく、距離計算を実行する前に、整形された結果を訪問者に示して確認してもらいましょう。

避けるべきよくある間違い

訪問者がおそらく意図したよりもはるかに粗い精度で解決されたクエリ、たとえば市区町村名や地域名だけで「locality」タイプの結果に一致したものに対しては、まず訪問者にそのことを伝えずに距離計算を実行しないでください。訪問者の実際の通りではなく市の中心部から計算した距離は、どちらの方向にも数キロメートルずれることがあり、どの店舗が最寄りに見えるかが変わるほどです。自信ありげな距離の数値を伝える前に精度のフィールドを確認すれば、大まかな推定を正確な値として示すことを避けられます。

あいまいな一致から訪問者に選んでもらう

ジオコーディングリクエストのlimitを1より大きくすると、複数の町に同じ名前の通りがある場合など、入力が本当にあいまいなときに複数の候補が返ります。その短いリストを表示し、距離計算の前に訪問者に正しいものを選んでもらう方が、たまたま1位になった候補に黙って決めてしまうよりも良い結果になります。

コスト

1回の計算は、得られた座標を何店舗と比較しても1回のジオコーディングリクエストです。訪問者の座標が得られれば、店舗リスト自体にはそれ以上のAPI呼び出しが必要ないからです。相当なトラフィックがあるランディングページでも、この機能の利用は訪問者の計算1回につき1リクエストであり、すべてのキーに含まれる1日あたりの無料リクエスト2,500件の範囲内に十分収まります。

このような距離計算機能は、訪問者を別の場所に送って調べさせるのではなく、よくある具体的な質問にページ上で直接答えます。リクエストパラメーターの詳細はジオコーディングのドキュメントにあります。