GoogleStreetViewが勝手に動く!?GoogleMapAPIを使った自動再生プログラムを作ってみる。
そこで今回はGoogleMapAPIでストリートビューを操作して付近を散歩するプログラムをつくってみようと思います。
事前準備
GoogleMapAPIを利用するには「APIキー」が必要になります。
事前に以下のサイトなどを参考にGoogle Maps のAPIキーを取得しておいてください。
作成するプログラムの仕組み
今回ご紹介するプログラムは
- 開始位置を指定してストリードビューを描画
- 画面内に表示されるリンクを取得
- 向ている方向に近いリンクを選んで位置を更新
- ただし、リンクが4以上ある場合はランダムでリンクを選択して位置を更新
以上を指定した回数繰り返す仕組みとなっています。
ランダムな要素をいれることで思いがけない方向にいくことを楽しもうと思います。
リンクを取得してどれを選ぶか？の箇所を色々と工夫することで行先がかなり変わってきます。
自動再生する前のストリートビュー
作成したソースコード
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
</style>
</head>
<body>
<div id="street-view"></div>
<script>
const LIMIT = 30; // 移動回数の上限値
const WAIT_SECOND = 2; // 次に移動するまでの秒数
const START_LAT_LNG = {lat: [ここに緯度], lng: [ここに経度]}; // 開始地点の緯度、経度
const START_HEADING = 180; // 開始時の方角
let panorama;
// GoogleMapApi 読み込み時にcallbackで呼び出される
function initMap() {
let Links, count = 0, timer_id;
// ストリートビューの表示
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'), {
position: START_LAT_LNG,
pov: {
heading: START_HEADING,
pitch: 0
},
zoom: 1
}); //
// 画面内のリンクを取得
Links = panorama.getLinks();
// ストリートビューの状態が変更されるたびに実行される
google.maps.event.addListener(panorama, 'status_changed', function () { //
if (panorama.getStatus() == "OK") {
Links = panorama.getLinks();
if (count > LIMIT) {
alert('stop');
return false;
}
setTimeout(
function () {
let target = 0;
if (Links.length >= 4) {
target = Math.floor(Math.random() * Links.length); // ランダムで選択
} else {
//現在向ている方向に近いlinkを選択
let val = 360;
let currentPov = panorama.getPov();
Links.forEach(function (element, index) {
let ans = Math.abs(currentPov.heading - element.heading);
if (val > ans) {
val = ans;
target = index;
}
});
}
// 次に移動するLink先に向きを変える
panorama.setPov({
heading: Links[target].heading,
pitch: 0
});
// 次のストリートビューに移動する
panorama.setPano(Links[target]['pano']);
count++;
},
WAIT_SECOND * 1000
);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=[ここに取得したAPIキー]&callback=initMap"
async defer></script>
</body>
</html>
ソースコードの解説
今回は簡略化する為に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はかなり多機能なので色々試してみるとおもしろいと思います。
この記事を書いた人
- 創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この執筆者の最新記事
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー