- 詳細
-
2011年10月21日（金曜）10:53に公開
-
作者: 佐藤英人
Google Maps API V3 では、V2まであったStreetViewPanoramaのfollowLink()メソッドがなくなったため、ストリートビューを動画で表示すること（ドライブビュー）が難しくなりました。
ここで紹介するものは、Google Maps API V3 の基本機能だけを使って、V2のときと同様のドライブビューを実現するものです。
1. ルートに沿ったマーカーアニメーション
最初に指定したルートに沿ってマーカーーを一定速度で動かすものを作りました。
マーカーアニメーション （animate_marker）
これはGoogle Mapsのデモギャラリーにある以下のドラッグでルート変更できるルート設定プログラムにマーカーアニメーションを付けたものです。
ドラッグ可能なルート設定（http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-directions/draggable-directions.html）
同様のマーカーアニメーションプログラムは他にもありますが、ここで紹介したものは、Google MapsのDirectionsRendererを活用することで、シンプルなプログラムでそれを実現しています。
2. ルートに沿ったドライブビュー
上のプログラムのマーカーの緯度経度をStreetViewPanoramaオブジェクトにセットすることで、ドライブビューが実現できるでしょう。これは比較的簡単そうですので、学生さんの練習課題にすることにします。Google Mapsの「サービス/ストリートビュー」の解説を見ればやり方が分かると思います。
なお、ストリートビューではカメラの方位（東西南北）はデフォルトでは固定されています。最終的には進行方向に合わせて方位を設定し直す必要があります。緯度経度から方位を割り出す方法は、以下のサイトが詳しいです。
緯度経度から各種データを計算する（http://www.movable-type.co.uk/scripts/latlong.html）
3. 学生達と作成したドライブビュー
ファーストバージョン （drive_view1）
最初はキャッシュが間に合わず画像が停滞します。もう一度実行して（スタートボタンを押して）みてください。また、IEよりFireFoxやSafari、Google Chromeの方がスムーズに動くようです。
実はこのプログラムには不完全なところが残されています。例えば、「市民会館入口」交差点から出発し「松江町」交差点を右に曲がり「連雀町」交差点へ行くルート（第４象限の位置から第３象限に曲がるルート）を設定してみてください。90度右に曲がるのではなく、270度左に曲がるというアクロバット走行になります。なぜそうなるか考えて見てください。
