Googleマップを現在地からの経路検索で開くリンクを作成する

Pocket

久しぶりの更新すぎてブログの書き方を忘れたボクです。こんにちは。
(こんなノリじゃなかった気がする)

ちょいちょい周りからブログ更新しないの?と聞かれつつも面倒忙しさでついつい後回しにしてました!

それでもお盆中(過ぎた)に一本くらい書こうと思っていたので、ちょっと前の案件で必要になった「Googleマップを現在地からの経路検索で開くリンク」をGeolocation APIを使って実装するお話でリハビリしてこうと思います。

そういえばその案件でお客さんのGoogleアカウントを使ってAPIキー発行したらアカウント作成時に本人認証をしていなかったらしく、アカウント休止状態になってしまいお盆中にGoogleマップ表示されないんだけど?!となったのでみなさんお気をつけ下さい。

さて、前置きはこのくらいにしてそろそろ本題に入ります!

「Googleマップを現在地からの経路検索で開くリンク」ってなんだ

と思われることもありそうなので少し具体的に説明をば。

ウェブサイトを作っているとよくGoogleマップの埋め込みとその傍らにGoogleマップを直接開くリンクテキストなどを置いておくことがあります。

このとき特定の住所を開くだけではなく、現在地からその住所への経路検索をした状態で開きたい!という要望がありました。

経路検索をした状態というのは↓こんな感じです。
宮城から東京への経路

この「宮城から」のところを「現在地から」で開きたい。というわけです。

調べたところGoogleマップの公式ではそういったサービスを提供していないようでしたので、Geolocation APIを使って経路検索した状態のURLを作ることにしました。

ということで、Geolocation APIの使い方を見てみる

みんなだいすき(かはわからないけど)MDNさんのGeolocation の利用によると、Geolocation API はnavigator.geolocationを通じて提供され、ユーザーの現在位置を取得するにはgetCurrentPosition()メソッドを呼び出すそうです。

※Chromeはバージョン50からhttpでの現在地の取得を禁止しているので、大多数のブラウザに対応するにはhttps化する必要があります。


getCurrentPosition()の第1引数は、現在位置の取得に成功したときのコールバック関数を、第2引数は失敗したときのコールバック関数を実行います。

つまり、現在位置の取得に成功した結果を受け取りたい場合には、第1引数に関数を指定してやればその関数の引数として結果が受け取れます。

位置情報はposition.coords.latitudeに緯度、coords.latitudeに経度が格納されています。


実際に使う際には、即時関数などの中でブラウザがGeolocation APIに対応しているかどうかの判定を加えて使います。


エラー時やオプションを設定する場合にはこのようなコードになります。

ちなみに

getCurrentPosition()の他にも現在位置を取得するメソッドとしてwatchPosition()がありますが、こちらは現在位置が更新されるたびにコールバック関数を実行してくれるものなので、よりリアルタイムな位置情報が必要なときにはこちらを使います。

引数の設定がgetCurrentPosition()と同じなのは覚えやすくていいですね。

現在位置の取得方法がわかったので、経路検索のURLを作って設定する

現在位置が取得できたら後は簡単です。
jQueryとか使ってa要素のhrefを経路検索のURLに書き換えます。

経路検索のURLはhttps://www.google.co.jp/maps/dir/{緯度},{経度}/{目的地}/」となっているため、{緯度}{経度}をGeolocation APIで取得した情報を指定し、{目的地}のところは予め設定した住所をURLエンコードして指定します。

今回はhrefに予めGoogle mapで住所のリンクを設定しておき、Geolocation APIが使えない場合にはその住所が開くようにしました。

しかし、使える場合でもクリックされたタイミングで現在位置を取得していないこともありえるため、取得できていなかったら簡単なローディングアニメーションを表示しておき、取得できたタイミングでlocation.hrefwindow.openを使って開くようにするとユーザーには親切かなと思います。

できたもの

(このブログがhttps化してないので)CODEPENでサンプル用意してみました。スマホで見た方が位置情報が正確なので楽しいです。

おわり

ということで「Googleマップを現在地からの経路検索で開くリンクを作成する」でした。

Chromeのバージョン50以上からhttpsじゃないと使えない仕様なのは盲点になりそうなので注意が必要ですね。

ではでは ( ͡° ͜ʖ ͡° )ノシ

Pocket

コメントを残す