行きたい店舗を選んだ後も、出発前には地図で位置や移動方法を確認する。そこで店名をコピーして検索し直すと、似た名前の別店舗を選んでしまうことがある。地図上の名称と看板が違い、目的地を見つけにくい場合もあるだろう。

Musecat Alphaには、すでに店舗の位置を保存している。この情報をNAVERマップの目的地として渡せば、同じ場所を探し直す手間を減らせる。詳細画面の経路検索ボタンは、この接続を用意したものだ。

2023年6月17日のコードの再現と合成サンプルデータ。経路案内ボタンが選択した店舗をNaver Mapへ渡す。 韓国語の原画面。当時のAlphaは韓国語のみ対応。

店舗検索と目的地の指定

名前による検索は、目的地が決まっていない段階では便利である。しかし一つの店舗の詳細を選んだ後まで、同じ検索を繰り返す必要は少ない。例えば同じ店名の店舗が複数あれば、地図の検索結果で支店を再び区別することになる。

そこで名前とともに保存済みの座標を渡すことにした。座標は緯度と経度で位置を表す値である。選んだ位置をそのまま渡し、そこまでの経路や交通情報はNAVERマップで確認する方式だ。

flowchart LR
    accTitle: 探索から経路案内への接続
    accDescr: 選んだ店舗の名称と座標をNaver Mapへ渡し、目的地の再検索を省く。
    A["店舗を選択"] --> B["店舗の名称と座標"] --> C["Naver Mapの経路案内"]

地図URLを作る共通関数

NAVERマップのWebアドレスには、目的地を指定するパラメーターがある。AlphaのGetNaverMapLinkは、経度、緯度、店舗名をelng、elat、etextへ入れ、新しいウィンドウを開く。画面で見ていた名前も渡すため、目的地を確認できる。

住所や地図から店舗を開く操作にも同じ関数を使う。各ボタンが別々にURLを作ると渡す情報に差が生まれ得るため、店舗情報からURLを組み立てる部分を一か所へまとめた。

flowchart TD
    accTitle: 目的地リンクの構成
    accDescr: GetNaverMapLinkが目的地の経度・緯度・名称をNaver MapのWeb URLに変換する。
    A["経路案内ボタン"] --> B["GetNaverMapLink"] --> C["経度・緯度・名称"] --> D["Naver MapのWeb URL"]

モバイルとデスクトップの経路検索

渡す情報は閲覧環境によって少し異なる。モバイルと判定したブラウザーには目的地中心のURLを渡す。デスクトップでは現在位置の経度と緯度も出発地点として含める。

どちらも開くのはNAVERマップのWebアドレスである。ボタンから必ずモバイルアプリを直接起動するとは限らない。Musecatが渡すのは出発地と目的地の情報で、その後の画面と経路案内は地図サービスで続く。

flowchart TD
    accTitle: 環境別の出発点
    accDescr: モバイルは目的地のみ、PCは現在座標を出発点に加えて渡す。
    A["経路案内のリクエスト"] --> B{"モバイル環境か"}
    B -->|はい| C["目的地のみ"]
    B -->|いいえ| D["現在座標と目的地"]
    C --> E["Naver MapのWeb URL"]
    D --> E

座標連携の活用と位置情報の精度

利用者は店舗の詳細情報から、その位置への経路検索へ進める。この段階では、Musecat内に新しい経路計算を作るより、店舗を探す機能を既存の地図サービスへつなぐ方が目的に合っていた。

ただし正しい座標でも、建物の中心と入口は異なる場合がある。到着後にどの出入口を使うかまで、一つの座標で伝えるのは難しい。座標が誤っていれば元の店舗データを直す必要があり、経路情報の更新は地図サービスに依存する。

参考：経路案内リンクの実装。