## Googleが提供しているDirections APIを用いて経路検索を実装します。 [公式ドキュメントはこちら](https://developers.google.com/maps/documentation/directions/quickstart?hl=ja) ## Node.jsで実装公式が提供している **@googlemaps/google-maps-services-js** というライブラリを使います。 1. ライブラリのインストール ```bash yarn install @googlemaps/google-maps-services-js ``` 2. 処理の記述 ```js import { Client } from '@googlemaps/google-maps-services-js' const client = new Client() .directions({ params: { key: 'APIKEY', origin: '博多駅', destination: '天神駅', language: 'ja', } }) .then(res => { console.log(res.data) }) ``` directionsメソッドを使用します。引数にパラメータとして ``` key: APIキー origin: 現在地 destination: 行き先 language: 検索結果の言語 ``` を指定します。 3. 実行結果以下のようなjsonを取得することができます。 routes配列の中に経路の検索結果が入っています。 ``` { geocoded_waypoints: [ { geocoder_status: 'OK', place_id: 'ChIJdbP55seRQTURkIu5RT0r4i4', types: [Array] }, { geocoder_status: 'OK', place_id: 'ChIJd5DjRI6RQTURMDt50eAUgg4', types: [Array] } ], routes: [ { bounds: [Object], copyrights: 'Map data ©2021', legs: [Array], overview_polyline: [Object], summary: '大博通り/県道43号と明治通り', warnings: [], waypoint_order: [] } ], status: 'OK' } ``` legs配列内のsteps配列に経路案内が入っています。 ``` { distance:{ text:41 km value:41 } duration:{ text:1分 value:15 } end_location:{...} html_instructions:北方向に住吉通り/<wbr/>市道博多駅前線を進んで大博通りに向かう polyline:{...} start_location:{...} travel_mode:DRIVING }, { distance:{ text:1.2 km value:1151 } duration:{ text:4分 value:227 } end_location:{...} html_instructions:博多駅バスターミナル前（交差点） で、住吉通り/<wbr/>市道博多駅前線 を斜め左方向に曲がり 大博通り/<wbr/>県道43号 に入る polyline:{...} start_location:{...} travel_mode:DRIVING } ``` 4. サイトに表示 ![スクリーンショット 20210621 17.32.39_resized.jpg](https://i.gyazo.com/6a71e589a505c682e130a7fb983d138b.png) データを整形することで上のようなサイトをつくることができました。 ## 寄り道する directionsメソッドに渡すパラメータのオプションを追加することで寄り道をすることができます。例えばwaypointsを追加することで、博多駅から天神駅に向かう間にセブンイレブンを経由してくれます。 ```js params: { key: 'APIKEY', origin: '博多駅', destination: '天神駅', waypoints: ['セブン-イレブン博多駅前通店'], language: 'ja', } ``` ## 他のオプション他にも ``` mode: 移動手段 avoid: 避けるべきルートの指定 ``` などたくさんのオプションがあります。 [オプションについてのドキュメント](https://developers.google.com/maps/documentation/directions/get-directions?hl=ja) ## おわりに Directions APIを使うことで自分だけの経路案内を作成することができます。ぜひ活用してみてください。 writed by ふっけ