こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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)」の部分)。

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

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

投稿日時 - 2011-05-15 11:24:12

QNo.6738884

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

投稿日時 - 2011-05-15 17:03:01

お礼

ありがとうございました。一発で解決いたしました。getPanoramaByLocation というものがあるんですね。

投稿日時 - 2011-05-15 23:11:15

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(1)

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-