グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



GoogleStreetViewが勝手に動く!?GoogleMapAPIを使った自動再生プログラムを作ってみる。

webの制作のなかでよくGoogleMapを利用しているのですが、ストリートビューもGoogleMapAPIから操作できることを知りました。
そこで今回はGoogleMapAPIでストリートビューを操作して付近を散歩するプログラムをつくってみようと思います。

事前準備

GoogleMapAPIを利用するには「APIキー」が必要になります。
事前に以下のサイトなどを参考にGoogle Maps のAPIキーを取得しておいてください。

作成するプログラムの仕組み

今回ご紹介するプログラムは

  • 開始位置を指定してストリードビューを描画
  • 画面内に表示されるリンクを取得
  • 向ている方向に近いリンクを選んで位置を更新
  • ただし、リンクが4以上ある場合はランダムでリンクを選択して位置を更新

以上を指定した回数繰り返す仕組みとなっています。

ランダムな要素をいれることで思いがけない方向にいくことを楽しもうと思います。
リンクを取得してどれを選ぶか?の箇所を色々と工夫することで行先がかなり変わってきます。

自動再生する前のストリートビュー

作成したソースコード

ソースコードの解説

今回は簡略化する為に1ファイルに全部記述しています。
大体の内容はソースコード中にコメントで記載していますが、ポイントをいくつか紹介します。

最初のストリートビュー描画設定

上記ソースコード36~44行目の箇所で最初のストリートビュー描画の設定を行っています。

  • posision:表示する位置の緯度、経度を指定します。
  • pov:「point of view」のことで視点に関する設定を行います。
    • heading:真北を基準とした度単位のカメラの向き。 真北は0°、東は90°、南は180°、西は270°です。今回のサンプルでは開始時に東を向いてスタートするようにしています。
    • pitch:ストリートビュー車両に対するカメラのピッチ(度単位)。 90°(真上)から-90°(真下)までの範囲。今回は水平にしています。

ストリートビューの状態が更新されるたびに実行する処理

上記ソースコード50~88行目でイベントを設定してストリートビューの状態が変化する為に処理を行っています。

  • 画面に表示されるリンクを「getLinks()」メソッドで取得してその中から次に進む地点を選択して「setPov()」で視点を変更し、「setPano()」で実際に次の地点に移動するという処理になっています。
  • 「pano」はストリートビューパノラマのパノラマIDのことで、パノラマIDはブラウザの現在のセッション内でのみ安定して利用できる値です。「getLinks()」の返り値の中に入っているのでそれを利用します。
  • 次に進むリンクの選定は4つ以上のリンクがある場合はランダム、それ未満は向いている方向に近いリンクを選定しています。
    たとえばここの処理を変更することで常に一番北を指すリンクを選ぶことも可能です。
  • setTimeoutを使うことで移動するまでの時間を調整しています。
    また移動回数をカウントすることで指定回数で移動を止めるようにしています。

今回利用したStreetViewPanoramaクラスのリファレンスは以下になります。

自動再生デモ(録画)

実際には実行するたびにいろんな場所に到着します。
※ストリートビューのパノラマが存在しない場所にはいけません。

GoogleMapAPI使用時の注意点

今回のAPIの利用方法は「Dynamic Street View」にあたります。
GoogleMapAPIは月額無料枠が200ドル分ありますが「Dynamic Street View」は 最大14,000パノラマまでが無料範囲になります。
制限無しでずっと動かし続けると無料枠を超える可能性があるのでご注意ください。

マップ、ルート、プレイスの 料金設定

まとめ

いかがだったでしょうか。今回は簡単なデモでしたが、Directions APIやGeolocation APIを組み合わせる事で 現在地と目的地間のルートをストリートビューで自動再生することもできそうですね。 GoogleMapのAPIはかなり多機能なので色々試してみるとおもしろいと思います。

The following two tabs change content below.

竹内 和也

事業開発部 web application engineer
大学卒業後、Web系ベンチャー企業でシステムエンジニアを経て、2009年にアーティスへ入社。 システムエンジニアとして多くの大学・病院・企業・自社のwebシステム開発に携わる。 2020年より事業開発部として新規サービスの開発に従事している。 資格:LPIC3
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします