javascriptでカンタン経路検索

数え切れないほどのYUREXと一緒に住んでいた渡邊です。

今の時代、ブラウザさえあれば経路情報をカンタンに取得することができます。 今回はGoogleの経路検索APIとjavascriptとブラウザを使います。

1. 結果を見る

弊社、自由が丘オフィスから鎌倉本社までの経路についての、 APIレスポンスをまとめたものは下記の通りです。

route.json

2. 確認する

出発地名と到着地名を入力して経路検索ボタンを押すと、 Firefoxのconsoleに経路検索結果をまとめたオブジェクトが表示されます。 consoleオブジェクトが無いブラウザの場合は、アラートで簡潔にお知らせします。 ※都道府県名を含めない場合、結果が出ないことがあります。

出発地名: 到着地名:

3. 主要なクラスのリファレンス

4. ソースを見る

リファレンスだけでは少しわかりにくいので、経路検索APIのレスポンスをまとめてみました。 当ブログがjQueryフィーバーなため、jQueryを使わない方向で書いています。 GDirections.loadの設定が雑なので、スマートな方法を模索中です。

route.js

今回は経路情報をデータ構造にまとめたので、 次回はGoogleStaticMapsAPIやGoogleStreetViewと組み合わせて使ってみようと思います。

カヤックではGoogleのWebAPIを指一本で使いこなせるエンジニアを募集しています。