東京マラソン2016にて切れ切れに表示する動画をちょっと前に発表しました。Google Maps JavaScript API v3の使い方がマスターできてなく、他の方のサイトを利用させていただく方式でした。

APIのドキュメントの正式版は英語で公開されています。 サンプルコードも同梱されていて、その体験談（Hyperlapse で環状八号線を南下する動画を Google ストリートビューからつくってみた）を参考にしながら独自で連続方式ハイパーラプス動画を作成してみました。

体験談ではsimple.htmlを拡張されているようですが、今回はhyperlapse.js-master─examples─viewer.htmlを参考にしました。一回の関数呼び出しで、8箇所の経由地点を指定できることが判り、開始地点、終了地点を含めて総計10箇所でビューイング可能です。

切れ切れ動画では27箇所をつないでストリートビュー表示していましたので、42.195kmを3分割して表示しています。

ブラウザによっては動作ソフトが停止することがあり、原因はまだ、はっきりしていません。

そのため、問題なく動作した例を、デスクトップキャプチャーソフトによりダウンロードしたものをユーチューブに投稿しました。

動画には説明文もあり、全画面表示にすると見やすいです。

ルートデータを作成しロード中の待ち時間がかったるい感じを受けますが、将来の改良課題と考えています。ストリートビューでは、好まざる動きになっている部分がありますが誤差のうちとお許しください。

先の環八サイトの閲覧者もコメントで質問されていますが、ビューイングの繰り返しを止める制御コードに苦心しました。hyperlapse.onFrame位置情報の抽出関数で、hyperlapse.length()の一つ前で動作する処理コードを追加して解決に至っています。

音楽やキャプションなどを入れると魅力ある動画になると思われ、研究中です。