NowLoading...
「博多駅から天神駅までの行き方 」Directions APIを使った経路検索

「博多駅から天神駅までの行き方 」Directions APIを使った経路検索

Node.js

Node.js

Googleが提供しているDirections APIを用いて経路検索を実装します。

公式ドキュメントはこちら

Node.jsで実装

公式が提供している @googlemaps/google-maps-services-js というライブラリを使います。

  1. ライブラリのインストール
yarn install @googlemaps/google-maps-services-js
  1. 処理の記述
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: 検索結果の言語

を指定します。

  1. 実行結果

以下のような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:<b>北</b>方向に<b>住吉通り</b>/&lt;wbr/&gt;<b>市道博多駅前線</b>を進んで<b>大博通り</b>に向かう polyline:{...} start_location:{...} travel_mode:DRIVING }, { distance:{ text:1.2 km value:1151 } duration:{ text:4分 value:227 } end_location:{...} html_instructions:<b>博多駅バスターミナル前(交差点)</b> で、<b>住吉通り</b>/&lt;wbr/&gt;<b>市道博多駅前線</b> を斜め<b>左</b>方向に曲がり <b>大博通り</b>/&lt;wbr/&gt;<b>県道43号</b> に入る polyline:{...} start_location:{...} travel_mode:DRIVING }
  1. サイトに表示 スクリーンショット 20210621 17.32.39_resized.jpg

データを整形することで上のようなサイトをつくることができました。

寄り道する

directionsメソッドに渡すパラメータのオプションを追加することで寄り道をすることができます。 例えばwaypointsを追加することで、博多駅から天神駅に向かう間にセブンイレブンを経由してくれます。

params: { key: 'APIKEY', origin: '博多駅', destination: '天神駅', waypoints: ['セブン-イレブン 博多駅前通店'], language: 'ja', }

他のオプション

他にも

mode: 移動手段 avoid: 避けるべきルートの指定

などたくさんのオプションがあります。 オプションについてのドキュメント

おわりに

Directions APIを使うことで自分だけの経路案内を作成することができます。ぜひ活用してみてください。

writed by ふっけ

ふっけ

ふっけ

@fukke0906