Liner Note

要約：Googleストリートビューで決められた経路を自動で案内するプログラムを書いてみました

前に続いて、今回はGoogleストリートビューを道案内に使ってみようと思います。あらかじめ指定した経路をボタン操作で行ったり来たりします、自動案内（3秒ごとに移動）も可能です。ALPSLAB videoに少し似ているかも。

あまりJavascriptに理解していないところもあるので、ちょっとレガシーなブラウザだと動作速度が気になるくらいの出来です。画像を読み込まないうちにずんずん先に行っちゃうと、ブラウザがたまに固まっちゃいます…。

ではとりあえず、例として京都の烏丸御池駅から（株）はてな京都本社までの道案内を。徒歩2-3分くらいでしょうか。

こちらは東京。西新宿駅から（株）ミツエーリンクスまで。徒歩8分くらいですが、かなり長く感じます。移動速度がそれほど速くないので、徒歩6分くらいまでが使っていて耐えられるくらいの時間でしょうか。

技術的な話

前回とほぼ同じ感じで全画面ストリートビューをobject要素^*1 で読み込んでいます。

経路データはJSONで記述していて、fNameというクエリで指定します（はてなの例だとhttp://note.openvista.jp/..（中略）..&fName=map/hatena.json）。

JSON経路データは大きくstart, goal, pointsと3つのキー群があって、それぞれ始点の緯度経度、終点の緯度経度、そして行動になります。行動には5つのパラメータがあり、それぞれ行動の種類（type）・進行方向（dir）・左右向き（yaw）・上下向き（pit）、コメント（com）が指定できます。行動の種類は視点の変更のみ（pan）と移動（walk）が指定できます。

移動の場合、進行方向が必須オプションになっており、0～360度^*2 で指定します。視点変更の場合は、左右・上下の向きが必須で左右向きは0～360度で、上下向きは-90～90度^*3 で指定が必須になります。

debugクエリをつけると、緯度・経度、向きが出るようになっているので、始点位置を探す場合などはこれを利用すると探しやすいです。

やっていて困った点はinitializedイベントで呼び出すGmap#panToイベントがかなり重いのか、画像が読み込まないうちに次々と移動された場合、panToイベントがブラウザを固まらせてしまうところです。結局毎回の移動時に呼ぶのではなく、5回に1回呼ぶようにしています。

あー、しかし、つくづくiPhoneがFlashに対応していないのが悔やまれます。

ダウンロード

ストリートビュー道案内作成スクリプト

ライセンス

GNU General Public License

以下、参考にしたリンク先です。

• Google
  • Services – Google Maps API – Google Code
  • Google Maps API Reference – Google Maps API – Google Code
• ストリートビューのAPI（京都散策のサンプル） – プログラマはサイコロを振らない
• Google Map APIを使ったことがない人でもわかるストリートビューの使い方 – 遥か彼方の彼方から
• AjaxTower
  • ストリートビュー(GStreetviewPanorama) – Google Maps入門
  • JSON形式のファイルの取得 – 外部ファイルの読み込み – Google Maps入門
• parpue.net
  • parpue.net – ストリートビューと地図の連携
  • parpue.net – Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた

Internet Explorer で表示されなかった問題を解消しました

1. iframe要素にしないのはXHTML1.1に適合させるため[戻る]
2. 北:0, 東:90, 南:180, 西:270[戻る]
3. 真上が-90, 水平が0, 地上が90[戻る]

キーワード：

• ツールの制作
• プログラミング技術絡み