G Maps APIで同時にストリートビューを表示する方法
- Google Maps JavaScript API V3を使用してページを作成しています。
- ページを開くと同時に左側にはロードマップ、右側にはストリートビューを表示したいと思っています。
- 現在該当ページのソースを見ると、ページを開いた時点ではストリートビューが表示されません。
- ベストアンサー
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）」の部分)。 上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。 どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?
- 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>
関連するQ&A
- Google Map APIに関して
http://code.google.com/intl/ja/apis/maps/documentation/examples/map-simple.html にあるようなページで、このhtmlファイル中に特定の文字列を埋め込んだらその名称を地名とする検索を行い、表示するとしたいのですが、どうやったらいいですか？ その箇所にマーカを置けたらなおいいです。 （例：http://code.google.com/intl/ja/apis/maps/documentation/examples/map-markers.html）
- 締切済み
- JavaScript
- Google Mapsのストリートビュー★
Google Mapsでストリートビュー見たいです。 ネット歴は3年ですがあまり詳しくないです。 詳しく使い方まで説明していただけないでしょうか? わかりやすくおしえていただきたいです！ どうかよろしくおねがいします＾＾★
- 締切済み
- その他（インターネット・Webサービス）
- GoogleMapsAPIのストリートビュー
GoogleMapsAPIでマーカーをストリートビューで表示させたい GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、 このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか マーカーは人型のアイコンではなく、追加したマーカーです よろしくお願いします 以下、ソースです /////////////////////////////////////////////// <script type="text/javascript"> function initialize() { var map = new google.maps.Map( document.getElementById("gMap"),{ zoom : 16, center : new google.maps.LatLng(35.688272,139.696459), mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true } ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(35.688272,139.696459), map: map, draggable : true }); } </script> <style> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */ } </style> </head> <body onload="initialize()"> <div id="gMap"></div> <div id="View"></div> </body> ///////////////////////////////////////////////
- ベストアンサー
- JavaScript
- google maps apiについて
現在HPをリニューアルしています。 旧サイトと新サイトは同じサーバー、同じドメインを使用しています。 旧サイトのデータはFTP内にはありません。 所在地マップに、GoogleMapを使用しています。 そこで、下記のようなエラーが出ます。 このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/signup.html で作成できます。 Google Maps API サーバーでリクエストが拒否されました。リクエスト内で指定した「sensor」パラメータには「true」または「false」のいずれかを指定する必要があります。 次に上記で指定されている http://code.google.com/apis/maps/signup.html にて、URLを指定して、APIを生成ボタンを押す 次にJavaScript Maps API の例で表示された <script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=*********************************" type="text/javascript"></script> をエラーが表示されるページに貼り付ける ここまでの作業をおこなっております。 ただ、これで正しいのかが分かりません。 詳しい方からのご助言頂けますでしょうか？
- 締切済み
- HTML
- Maps APIのストリートビュー表示と座標
以下のサイトのように、右上にストリートビュー解除ボタンと、左の人形マークを表示させる形でウェブサイトに埋め込みたいのですが、、、 http://phpjavascriptroom.com/exp7.php?f=include/ajax/gmapv3/streetview/streetviewpanorama_event.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB# ソースを見ると、head内で座標を指定しています。 これでは、もし10個、100個という複数の埋め込みに適用したい場合、いちいちhead内に座標を追加しなければならないので、効率が悪いです。 この座標指定行[var latlng=new google.maps.LatLng(35.6652470, 139.7123140); ]を省き、座標は記事編集ページ側で表示し、複数の埋め込みに適用させたいです。 様々なサイトを見てきましたが、全てhead内で座標を指定しているものだったので、これは実現不可能なのでしょうか。 head内、または記事編集ページ側で制御できるJavascriptがありましたら教えてください。
- 締切済み
- JavaScript
- Google Static Maps API で言う「ビューア」とは何ですか？
googlemapのstaticバージョンを貼る際の制限に 1日ビューアごとに画像1000枚まで、というものがあるようです。 http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/ このビューアとは何のことでしょうか？ 例えばお店の地図を（住所は固定で）googlemapのstaticで携帯サイトに貼るとします。 念のため最寄り駅からの地図ともう一つ別の路線の最寄り駅からの地図で二枚貼るとしますね。 この場合、どのようなことが起きると制限に引っかかってしまうのでしょうか。 あるいはこの事例とは関係なく、具体的にどういった場合制限に引っかかってしまうのでしょうか。 どなたかお詳しい方、教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- gmap ストリートビュー
普通の地図とストリートビューを両方表示したいですが。 どうもストリートビューのほうが不具合が生じます。 ストリートビューがない場所に近いところのストリートビューを表示したいですが、どうすればいいですか？ IEで見ると、ストリートビューの方角標識がズレてて、修正方法を教えていただけますでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var map_canvas; function initialize() { var initPos=new google.maps.LatLng(35.658613,139.745525); var mapOptions = { center:initPos, zoom:14, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl: true, mapTypeControl : true, mapTypeControlOptions : { style : google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var request = { address: "千葉県佐倉市ユーカリが丘４-５７５-２２" }; var geocoder = new google.maps.Geocoder(); geocoder.geocode(request, procGeocodeCallback); } function procGeocodeCallback(results,status){ var response; if(status == google.maps.GeocoderStatus.OK){ for (var i = 0; i < results.length; i++){ map_canvas.setCenter(results[i].geometry.location); openInfoWnd(results[i].geometry.location, results[i].formatted_address.replace(/^日本, /, '')); var markerOpts = { position : results[i].geometry.location, map : map_canvas }; var marker = new google.maps.Marker(markerOpts); // ストリートビュー表示 var svp = new google.maps.StreetViewPanorama( document.getElementById("street"), { position : results[i].geometry.location, pov : { heading : 90, // 東 pitch : 20, // 斜め上 zoom : 0.5 // ズームアウト } }); map_canvas.setStreetView(svp); // ストリートビューの方角などを求める function checkSTV(){ var pov = svp.getPov(); var hd = pov.heading; // 方角 var pt = pov.pitch; // 見上げる角度 var zm = pov.zoom; // ズーム alert("方角："+hd+"、角度："+pt+"、ズーム："+zm); } } } } function openInfoWnd(latlng,txt){ if( txt === undefined) { txt =""; } else { txt += "<BR>"; } var info = new google.maps.InfoWindow(); info.setContent("<div id=\"gmap_d\">" + "<span>" + "ユーカリが丘" + "</span>" + txt + "</div>".toString()); info.setPosition(latlng); info.open(map_canvas); } google.maps.event.addDomListener(window,"load",initialize); --> </script> <div id="map_canvas" style="width: 450px; height: 300px; float:left"></div> <div id="street" style="width: 300px; height: 300px; float:left"></div>
- 締切済み
- JavaScript
- meta、http-equiv等について
http://code.google.com/intl/ja/apis/maps/documentation/examples/control-simple.html このページで <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 上の部分を消すとIEでは地図が表示されないんですがなぜですか？
- ベストアンサー
- JavaScript
- Google Maps APIのfitBounds
Google Maps APIのfitBoundsメソッドを以下のページを参考に導入してみました。 http://ma-bank.com/item/1415 上記のページのスクリプトはマーカーがオリジナルのものになっており、これをGoogle Mapのデフォルトのマーカーにしたいのですが、私はJavaScriptとGoogle Maps APIのいずれも初心者であり、その方法が分かりません。 ご教示願えませんでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- グーグルマップのストリートビューを適切に表示したい
はじめまして。 ウェブプログラミング初心者です。 ビルの情報を集めたウェブサイトを制作中の者です。 それぞれのビルのグーグルマップとストリートビューを表示したいのですが、 ストリートビューで建物内の店舗が表示されるものがあり どのように調整したらよいか困っています。 道路を表示させるための記述などあるのでしょうか。 下記にソースを添付させていただきます。 ご教示いただければ幸いです。 何卒どうぞよろしくお願いいたします。 <!-- 住所から緯度経度を取得する --> <?php $query =$address; $query = urlencode($query); $url = "http://www.geocoding.jp/api/"; $url.= "?v=1.1&q=".$query; $fp = fopen($url, "r"); while(!feof($fp)) { $line.= fgets($fp); } fclose($fp); $xml = simplexml_load_string($line); ?> <!-- 取得した緯度経度をJavaスクリプト内に入れて地図とストリートビューを表示 --> <script type="text/javascript"> // 変数群 var map,svp; //-------------------------------------------- //初期設定(ページを読み込んだ時に実行する関数) //-------------------------------------------- function initialize() { // 緯度・経度変数 var latlng = new google.maps.LatLng(<?php echo $xml->coordinate->lat; ?>,<?php echo $xml->coordinate->lng; ?>); // 地図のオプション設定変数 var myOptions = { // 向き heading: -20, // 初期のズーム レベル zoom: 17, draggable: false, // 地図の中心点 center:latlng, // 地図タイプ mapTypeId: google.maps.MapTypeId.ROADMAP }; //地図オブジェクト生成 map = new google.maps.Map(document.getElementById('map'), myOptions); // ストリートビューオブジェクト生成 svp = new google.maps.StreetViewPanorama( document.getElementById('svp'),{ position : map.getCenter() }); // ストリートビューオブジェクト詳細設定 svp.setPov({heading: -20, pitch: 0, zoom: 0}); // マップとストリートビューの一致させる為の記述 map.setStreetView(svp); } // function initialize() // ページを読み込んだ時にinitialize()を実行 google.maps.event.addDomListener(window, 'load', initialize); </script>
- 締切済み
- JavaScript
お礼
ありがとうございました。一発で解決いたしました。getPanoramaByLocation というものがあるんですね。