Googleマップストリートビューで目的地に最寄りのストリート位置（座標情報）を取得する方法

Googleマップストリートビューで表示可能な目的地近くの座標を取得する方法です。

ストリートビューを使ったことのある人はご存知と思いますが、ヒト型のマーカーをストリート上のブルーのラインの上にドラッグしてストリートビューを表示させます。
ストリートビューは全ての座標で表示可能ではありません。ブルーのラインの範囲にポジションを置かないと正しく表示されないのです。
つまり、APIで範囲外の座標位置を指定してしまうと、ストリートビューを表示できずにエラーになってしまいます。

APIを開発する上で、このエラーを避けるために「StreetViewService」の関数「getPanoramaByLocation」を利用することで、目的の近くのストリートビュー表示可能座標を取得することができます。

ストリートビュー表示可能ポイントを取得する

例えば、以下のような処理で考えてみます。

var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
        position: {lat: center_lat, lng: center_lng}
    }
);

idが「pano」の要素に対して、中心経緯度が「center_lat」「center_lng」のストリートビューを表示する基本的な記述です。

ここで、中心座標にストリートビューのデータが存在しない場合に、エラーとなりストリートビューは表示されません。
そこで以下の処理を追記します。

svs = new google.maps.StreetViewService();
    svs.getPanoramaByLocation({lat: center_lat, lng: center_lng}, 50, function(result, status) {
    if (status == google.maps.StreetViewStatus.OK){
            panorama.setPosition(result.location.latLng);
    }
});

「StreetViewService」の「getPanoramaByLocation」をコールすることで、任意の目的地の経緯度から、ストリービューが表示可能な最寄りの経緯度を取得することができます。
第二引数の「50」は引数の座標を中心に半径50m以内でポジションを取得することを意味します。

座標の取得に成功したら「setPosition」で改めてストリートビューの中心座標をセットします。
半径の許容範囲にもよりますが、僻地でない限りほとんどの場所でストリートビューの表示できるでしょう。

geometryライブラリを使ってカメラの向きを取得する

目的地から最寄りのストリートビューポイントを求めることはできましたが、このままでは、カメラはポイントから北を向いており、目的地を向いておりません。
一歩ステップアップして、ポイントから目的地を向く角度を求めてみます。

角度を求めるためには「geometry」ライブラリを使います。
ライブラリ使用にはAPI読み込み時に「libraries=geometry」としてライブラリを指定します。

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=（APIキー）&libraries=geometry'></script>

先ほどのコードに加えて、取得したストリートビューの座標「result.location.latLng」から目的地「c」見る場合の角度を関数「computeHeading()」を使って求めています。
求めた値「h」はストリートビューの関数「setPov()」で設定します。

var c = new google.maps.LatLng(center_lat, center_lng);
var h = google.maps.geometry.spherical.computeHeading(result.location.latLng, c);
panorama.setPov({ heading: h, pitch: 0 });

headingは南北東西の角度、pitchは天地の角度を設定します。

経緯度の数値は細かく、ストリートビューが表示可能な位置を直接指定するのは困難です。
また、マップは常に更新されているので、有効な値を長期間維持することも難しいです。
ストリートビューAPIを使ったサービスを運用する場合、今回の処理は必須といえるでしょう。