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

指定した座標から一番近い場所のストリートビューを表示する

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

グーグルストリートビューで、指定した座標が建物上だったり、ストリートビューが提供されていない場所だった場合、そこから一番近い場所のストリートビューを表示する方法があります。

GoogleMap APIのバージョンが異なると書き方が違ってくるので、その違いを紹介。

JavaScriptのクラスとして定義しています。

バージョン2の場合、以下のようにしていました。

var stViewClass = {

    panoramaOptions: {
        latlng: new GLatLng({緯度}, {経度}),
        pov: {
            heading: 0,
            pitch: 0,
            zoom: 1
        }
    },

    makeStreetView: function(id)
    {
        stPanorama = new GStreetViewPanorama(document.getElementById(id), this.panoramaOptions);

        stClient = new GStreetviewClient();
        stClient.getNearestPanoramaLatLng(this.panoramaOptions.position, function(latlng) {
            if (latlng != null)
            {
                stPanorama.setLocationAndPOV(latlng);
            }
        });
    }

}

バージョン3の場合、以下のような記述になります。

var stViewClass = {

    panoramaOptions: {
        position: new google.maps.LatLng({緯度}, {経度}),
        pov: {
            heading: 0,
            pitch: 0,
            zoom: 1
        }
    },

    makeStreetView: function(id)
    {
        stPanorama = new google.maps.StreetViewPanorama(document.getElementById(id), this.panoramaOptions);

        stClient = new google.maps.StreetViewService();
        stClient.getPanoramaByLocation(this.panoramaOptions.position, 50, function(result, status) { 
            if (status == google.maps.StreetViewStatus.OK)
            {
                var nearestPano   = result.location.pano;
                var nearestLatLng = result.location.latLng;
                stPanorama.setPosition(nearestLatLng);
            }
        });
    }
}

クラスを使用しない場合

panoramaOptions = {
    position: new google.maps.LatLng({緯度}, {経度}),
    pov: {
        heading: 0,
        pitch: 0,
        zoom: 1
    }
}

function makeStreetView(id)
{
    stPanorama = new google.maps.StreetViewPanorama(document.getElementById(id), panoramaOptions);

    stClient = new google.maps.StreetViewService();
    stClient.getPanoramaByLocation(panoramaOptions.position, 50, function(result, status) { 
        if (status == google.maps.StreetViewStatus.OK)
        {
            var nearestPano   = result.location.pano;
            var nearestLatLng = result.location.latLng;
            stPanorama.setPosition(nearestLatLng);
        }
    });
}
この記事がお役に立ちましたらシェアお願いします
4,945 views

コメントを残す

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