- ベストアンサー
G Maps APIで同時にストリートビューを表示する方法
- Google Maps JavaScript API V3を使用してページを作成しています。
- ページを開くと同時に左側にはロードマップ、右側にはストリートビューを表示したいと思っています。
- 現在該当ページのソースを見ると、ページを開いた時点ではストリートビューが表示されません。
- withnet
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
単純に表示したい場所にストリートビューの画像が無いだけですよ。 なので、ストリートビューの画像がある他の緯度経度にすれば表示されます。 都庁の緯度経度になっていますがもともとストリートビューは道路対応ですから。 ちなみにgetPanoramaByLocationを使用すると一番近い位置のストリートビューを表示する事も出来ます。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function init() { var mapdiv = document.getElementById('map_canvas'); var lat = 35.6894875; var lng = 139.6917064; var zoom = 16; var latlng = new google.maps.LatLng(lat,lng); var myOptions = { zoom: zoom, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( mapdiv, myOptions ); var panoramaOptions = { position: latlng, pov: { heading: 180, pitch: 10, zoom: 1 } }; var panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), panoramaOptions ); map.setStreetView( panorama ); var range = 200; // 200m範囲 var client = new google.maps.StreetViewService(); client.getPanoramaByLocation(latlng, range, function(result, status) { if (status == google.maps.StreetViewStatus.OK) { var location = result.location; nearestLatLng = location.latLng; panorama.setPosition(nearestLatLng); } }); } </script> </head> <body onload="init()"> <div id="map_canvas" style="width: 400px; height: 300px;"></div> <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> </body> </html>
お礼
ありがとうございました。一発で解決いたしました。getPanoramaByLocation というものがあるんですね。