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

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

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

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

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

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

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

ソースを表示
印刷SyntaxHighlighterについて
1var stViewClass = {
2 
3    panoramaOptions: {
4        latlng: new GLatLng({緯度}, {経度}),
5        pov: {
6            heading: 0,
7            pitch: 0,
8            zoom: 1
9        }
10    },
11 
12    makeStreetView: function(id)
13    {
14        stPanorama = new GStreetViewPanorama(document.getElementById(id), this.panoramaOptions);
15 
16        stClient = new GStreetviewClient();
17        stClient.getNearestPanoramaLatLng(this.panoramaOptions.position, function(latlng) {
18            if (latlng != null)
19            {
20                stPanorama.setLocationAndPOV(latlng);
21            }
22        });
23    }
24 
25}

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

ソースを表示
印刷SyntaxHighlighterについて
1var stViewClass = {
2 
3    panoramaOptions: {
4        position: new google.maps.LatLng({緯度}, {経度}),
5        pov: {
6            heading: 0,
7            pitch: 0,
8            zoom: 1
9        }
10    },
11 
12    makeStreetView: function(id)
13    {
14        stPanorama = new google.maps.StreetViewPanorama(document.getElementById(id), this.panoramaOptions);
15 
16        stClient = new google.maps.StreetViewService();
17        stClient.getPanoramaByLocation(this.panoramaOptions.position, 50, function(result, status) {
18            if (status == google.maps.StreetViewStatus.OK)
19            {
20                var nearestPano   = result.location.pano;
21                var nearestLatLng = result.location.latLng;
22                stPanorama.setPosition(nearestLatLng);
23            }
24        });
25    }
26}

クラスを使用しない場合

ソースを表示
印刷SyntaxHighlighterについて
1panoramaOptions = {
2    position: new google.maps.LatLng({緯度}, {経度}),
3    pov: {
4        heading: 0,
5        pitch: 0,
6        zoom: 1
7    }
8}
9 
10function makeStreetView(id)
11{
12    stPanorama = new google.maps.StreetViewPanorama(document.getElementById(id), panoramaOptions);
13 
14    stClient = new google.maps.StreetViewService();
15    stClient.getPanoramaByLocation(panoramaOptions.position, 50, function(result, status) {
16        if (status == google.maps.StreetViewStatus.OK)
17        {
18            var nearestPano   = result.location.pano;
19            var nearestLatLng = result.location.latLng;
20            stPanorama.setPosition(nearestLatLng);
21        }
22    });
23}
この記事がお役に立ちましたらシェアお願いします
,
5,011 views
≪ ≫

コメントを残す

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

関連記事

  1. 座標から住所を取得 GoogleMapAPI Geocoder
  2. GoogleMap ブラウザAPIキーの取得
  3. GoogleMaps API 標高の取得
  4. 描画ツールライブラリを使う GoogleMap v3