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

2019年12月18日

WEB

Web全般

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

INDEX

事前準備
作成するプログラムの仕組み
作成したソースコード
ソースコードの解説
自動再生デモ（録画）
GoogleMapAPI使用時の注意点
まとめ

事前準備

GoogleMapAPIを利用するには「APIキー」が必要になります。
事前に以下のサイトなどを参考にGoogle Maps の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クラスのリファレンスは以下になります。

StreetViewPanorama class

https://developers.google.com/maps/documentation/javascript/reference/street-view

自動再生デモ（録画）

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

GoogleMapAPI使用時の注意点

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

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

https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja