カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

Google StreetView Image API

この記事は最終更新日から1年以上経過しています。

Googleストリートビューを静的な画像として表示する方法をご紹介します。
GoogleStaticMapのようにimgタグを使って表示することが可能です。

形式

<img src="https://maps.googleapis.com/maps/api/streetview?[パラメーター]" alt="">

パラメーター

location 緯度経度
size 表示する画像のサイズ
※最大640×640
heading カメラの方位(0~360) 0=北
pitch カメラのアングル(90~-90) 90=上 -90=下
fov カメラの水平視野(0~120) 0=狭い 120=広い
zoom カメラのズーム(0~5) 0=遠い 5=近い
key APIキー

API Keyの使用が推奨されているようです。
API KeyはGoogle Developer ConsoleでStreet View Image APIを有効にすると使用できるようになります。

特別なことをしなくても指定した場所から最も近くにある画像を表示してくれるようです。
動的に表示したい場合はJavaScriptで実装します。

var stLat  = 35;  //緯度
var stLng  = 137; //経度
var radius = 50;  //近くのストリートビューを探す半径(単位:m)

targetLatLng = new google.maps.LatLng(stLat, stLng);

var stClient = new google.maps.StreetViewService();

stClient.getPanoramaByLocation(targetLatLng, radius, function(result, status) { 
    if (status == google.maps.StreetViewStatus.OK) {

        var nearestLatLng = result.location.latLng;

        var yaw = calcYaw(nearestLatLng, targetLatLng);

        document.write("<img src=\"https://maps.googleapis.com/maps/api/streetview?"
            + "size=640x640&location=" + nearestLatLng.lat() + "," + nearestLatLng.lng() + "&heading=" + yaw + "&pitch=0&fov=120&zoom=0\" alt=\"\">");

    } else if (status == google.maps.StreetViewStatus.ZERO_RESULTS) {

        alert("半径" + radius + "m以内のストリートビューが見つかりませんでした。");

    } else if (status == google.maps.StreetViewStatus.UNKNOWN_ERROR) {

        alert("google.maps.StreetViewServiceの不明なエラーです。");

    }
});

// 現在地から目的地の方向(角度)を計算する
calcYaw = function(fromLatLng, toLatLng)
{
    if (fromLatLng.equals(toLatLng)) {
        return -1;
    }

    var lat_f = fromLatLng.lat();
    var lng_f = fromLatLng.lng();
    var lat_t = toLatLng.lat();
    var lng_t = toLatLng.lng();

    var yaw = 90 - Math.atan2(lat_t - lat_f, lng_t - lng_f) * 180 / Math.PI;

    if (yaw < 0) {
        yaw += 360;
    }

    return yaw;
}

ただし、上記の2つの方法だと指定した地点に建物内部の画像があるとそちらを表示してしまいます。
しかもStreetViewService.getPanoramaByLocationが凍結されているようです。
そのため、現行のStreetViewService.getPanoramaに変更します。
StreetViewService.getPanoramaでは建物内部のストリートビューは表示しないよう指定することができます。

var LocationRequest = {
    location: new google.maps.LatLng(35, 137),
    radius: 50, //近くのストリートビューを探す半径(単位:m)
    source: google.maps.StreetViewSource.OUTDOOR, //外部ストリートビューのみに指定
}

targetLatLng = new google.maps.LatLng(stLat, stLon);
LocationRequest.location = targetLatLng;

stClient = new google.maps.StreetViewService();
stClient.getPanorama(LocationRequest, function(result, status) {
    if (status == google.maps.StreetViewStatus.OK) {

        var nearestLatLng = result.location.latLng;

        var yaw = stViewClass.calcYaw(nearestLatLng, targetLatLng);

        document.write("<img src=\"https://maps.googleapis.com/maps/api/streetview?"
            + "size=640x640&location=" + nearestLatLng.lat() + "," + nearestLatLng.lng() + "&heading=" + yaw + "&pitch=0&fov=120&zoom=0\" alt=\"\">");

    } else if (status == google.maps.StreetViewStatus.ZERO_RESULTS) {

        alert("半径" + radius + "m以内のストリートビューが見つかりませんでした。");

    } else if (status == google.maps.StreetViewStatus.UNKNOWN_ERROR) {

        alert("google.maps.StreetViewServiceの不明なエラーです。");

    }
});

Google公式ドキュメント
https://developers.google.com/maps/documentation/streetview/

この記事がお役に立ちましたらシェアお願いします
3,134 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です