- GoogleMap
- 2015-10-07
この記事は最終更新日から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