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)」の部分)。
上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。
どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?
No.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 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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Google Maps googleストリートビューで大きい黒枠のウインドウが邪魔 2 2023/02/15 21:47
- Google Maps 沖縄の宮古島と橋でつながる来間島のGoogleストリートビューに写る飛行物体・・・これは何ですか? 2 2022/04/13 18:17
- その他(OS) Mac OSの操作について 2 2022/06/08 09:19
- PDF PDF閲覧で 各ページの特定部分だけを表示する方法はありますか? 例えば 右下のページだけを確認した 2 2023/02/27 16:01
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- その他(IT・Webサービス) 301リダイレクトの使い方について 7 2022/04/05 17:50
- WordPress(ワードプレス) wordpressでphpを読み込みたい 1 2022/10/30 23:40
- Chrome(クローム) google earth PROをクリックすると下記の表示がされPROが開きません 2 2022/07/28 10:25
- Chrome(クローム) PCの Google Chrome が頻繁に「ページが応答していません」となり作業が進みません。 1 2023/05/25 20:43
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
HTMLにWSHを組み込む
-
C# 演算 奇数と偶数 表現の仕方
-
G Maps APIで同時にストリート...
-
javascriptでテーブルに追加し...
-
毎日日付の変わるタイミングを...
-
C#で、ContextMenuStripに動的...
-
gas スプレッドシートがアクテ...
-
GASでundefinedエラーが出ます
-
Javascriptで、以下の様な足し...
-
ブログの記事タイトルを他のペ...
-
画面から文字列を取得してその...
-
JavaScriptで平日のみをカウン...
-
ASP.NET MVCでObjectをjsに渡す
-
なぜmatchメソッドがエラーにな...
-
パス付きサイトのjavascript解析
-
択一形式のテストをつくりたいです
-
googleスプレッドシートのApps ...
-
AM,PMの時間表示について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
1日1回引けるJavaScriptおみく...
-
javascriptでテーブルに追加し...
-
JavaScriptを使って毎日決まっ...
-
JavaScriptで文字列の特定文字...
-
googleスプレッドシートのApps ...
-
アクセス時からのカウントダウ...
-
ローカルにあるファイルを検索...
おすすめ情報