APITweetPocket久しぶりの更新すぎてブログの書き方を忘れたボクです。APIを使って実装するお話でリハビリしてこうと思います。いえばその案件でお客さんのGoogleアカウントを使ってAPIキー発行したらアカウント作成時に本人認証をしていなかったらしく、アカウント休止状態になってしまいお盆中にGoogleマップ表示されないんだけど?!となったのでみなさんお気をつけ下さい。前置きはこのくらいにしてそろそろ本題に入ります!「Googleマップを現在地からの経路検索で開くリンク」ってなんだと思われることもありそうなので少し具体的に説明をば。ウェブサイトを作っているとよくGoogleマップの埋め込みとその傍らにGoogleマップを直接開くリンクテキストなどを置いておくことがあります。このとき特定の住所を開くだけではなく、現在地からその住所への経路検索をした状態で開きたい!という要望がありました。経路検索をした状態というのは↓こんな感じです。宮城から東京への経路この「宮城から」のところを「現在地から」で開きたい。APIを使って経路検索した状態のURLを作ることにしました。navigator.geolocationを通じて提供され、ユーザーの現在位置を取得するにはgetCurrentPosition()メソッドを呼び出すそうです。※Chromeはバージョン50からhttpでの現在地の取得を禁止しているので、大多数のブラウザに対応するにはhttps化する必要があります。options)getCurrentPosition()の第1引数は、現在位置の取得に成功したときのコールバック関数を、第2引数は失敗したときのコールバック関数を実行います。現在位置の取得に成功した結果を受け取りたい場合には、第1引数に関数を指定してやればその関数の引数として結果が受け取れます。{console.log(position);});位置情報はposition.coords.latitudeに緯度、coords.latitudeに経度が格納されています。APIに対応しているかどうかの判定を加えて使います。{console.log(position);});}());エラー時やオプションを設定する場合にはこのようなコードになります。精度の高い位置情報を取得するか(true/false)});}());ちなみにgetCurrentPosition()の他にも現在位置を取得するメソッドとしてwatchPosition()がありますが、こちらは現在位置が更新されるたびにコールバック関数を実行してくれるものなので、よりリアルタイムな位置情報が必要なときにはこちらを使います。引数の設定がgetCurrentPosition()と同じなのは覚えやすくていいですね。現在位置の取得方法がわかったので、経路検索のURLを作って設定する現在位置が取得できたら後は簡単です。jQueryとか使ってa要素のhrefを経路検索のURLに書き換えます。APIで取得した情報を指定し、{目的地}のところは予め設定した住所をURLエンコードして指定します。APIが使えない場合にはその住所が開くようにしました。使える場合でもクリックされたタイミングで現在位置を取得していないこともありえるため、取得できていなかったら簡単なローディングアニメーションを表示しておき、取得できたタイミングでlocation.hrefやwindow.openを使って開くようにするとユーザーには親切かなと思います。できたもの(このブログがhttps化してないので)CODEPENでサンプル用意してみました。スマホで見た方が位置情報が正確なので楽しいです。おわりということで「Googleマップを現在地からの経路検索で開くリンクを作成する」でした。Chromeのバージョン50以上からhttpsじゃないと使えない仕様なのは盲点になりそうなので注意が必要ですね。