開発中の Cordova アプリに実装したのですが、今後も使いそうだったので備忘録としてまとめ。
アプリに地図を表示するときは、最近はもっぱら Leaflet を使っているのですが、それにプラスして、その場所への経路案内を行いたいという場合があるかと思います。
今回は、その方法についての紹介です。
実装にあたって、下記の記事を参考にさせていただきました。
GoogleMapへのリンクURL作成方法を調べた – Qiita
https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b
なお、GoogleMap の 公式ドキュメント Maps URLs のリンクはこちらです。
Get Started | Maps URLs | Google Developers
https://developers.google.com/maps/documentation/urls/get-started?hl=ja
早速、それを行うための URL を記載します。
https://www.google.com/maps/dir/?api=1&destination=[緯度],[経度]
上記のURL の destination というパラメーターに緯度経度を指定することで、その場所への経路案内のページを開くことができます。
また、緯度経度ではなく、場所の名前を指定することもでき、その場合は下記のように指定します。
https://www.google.com/maps/dir/?api=1&destination=[場所名]
さらに経由地を指定することもでき、waypoints というパラメーターで指定できます。
もし経由地を複数指定する場合は「|（バーティカルバー）」で区切ります。
サンプルの URL は下記の通りです。
https://www.google.com/maps/dir/?api=1&destination=横浜&waypoints=静岡駅|東京駅
あとは、travelmode パラメーターで移動方法なども指定できるので、大抵の経路案内には対応できるはずです。
基本的な使い方については以上です。
また、私は使いませんでしたが、指定した場所のストリートビューを開くこともできます。
そして私の場合、Cordova アプリで開発しているため、プラグインの cordova-plugin-inappbrowser 使い、テキストリンクをタップしたら、Google Chrome や Safari などのブラウザでその URL を開くような処理を実装しました。
サンプルコードは下記の通りです。
const url = 'https://www.google.com/maps/dir/?api=1&destination='+[緯度]+','+[経度]; window.cordova.InAppBrowser.open(url, '_system', 'location=yes');
テキストリンクがクリックされたら上記の処理を実行するようにしたところ、Google Map アプリが入っていればアプリが起動し、経路案内を実行することができました！
以上、指定した緯度経度の場所への経路案内ページをGoogleMap で開くURLを作成する方法についてでした。
ご参考になれば幸いです。
