Google Maps JavaScript API V3 を使ってページを作っています。 http://www.withmama.info/s_map/hatena.php 開いていただくと分かるのですが、左側にロードマップ右側にストリートビューを、「ページを開くと同時に表示」させるのが目的です。 Google では、 http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/streetview-simple.html というサンプルがあります(説明ページは、 http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView にある「ストリートビューの場所と視点（POV）」の部分)。上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?

G Maps APIで同時にストリートビューは?

解決済

質問者：withnet
質問日時：2011/05/15 11:24
回答数：1件

Google Maps JavaScript API V3　を使ってページを作っています。
http://www.withmama.info/s_map/hatena.php　開いていただくと分かるのですが、左側にロードマップ右側にストリートビューを、「ページを開くと同時に表示」させるのが目的です。

Google では、
http://code.google.com/intl/ja/apis/maps/documen …　というサンプルがあります(説明ページは、
http://code.google.com/intl/ja/apis/maps/documen …　にある「ストリートビューの場所と視点（POV）」の部分)。

上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。

どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： todemo
回答日時：2011/05/15 17:03

単純に表示したい場所にストリートビューの画像が無いだけですよ。

なので、ストリートビューの画像がある他の緯度経度にすれば表示されます。
都庁の緯度経度になっていますがもともとストリートビューは道路対応ですから。

ちなみに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 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>