- ベストアンサー
GoogleMapsAPIでストリートビューを表示させる方法
- GoogleMapsAPIを使用してマーカーを追加し、ストリートビューを表示する方法について教えてください。
- マーカーをクリックすると、別ウィンドウでストリートビューが表示されるようにしたいです。
- マーカーは人型のアイコンではなく、追加したマーカーで表示させたいです。
- kokorock_goo
- お礼率57% (11/19)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
提示されたソースコードの修正ではなく、自分で作成したものですが、 参考になりそうでしたら、ご利用ください。 尚、このページの単純コピペだと、変なところで改行されて動作不良と なることがあるようなので、適宜修正してください。 ////////// 以下ソース <!DOCTYPE html><html><head><title>サンプル</title> <meta http-equiv='Content-Type' content='text/html; charset=shift_jis'> <script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.13&sensor=false'></script> <script type='text/javascript'> var LatLng,mOptions,pOptions,map,pano; function initialize(){ LatLng = new google.maps.LatLng(35.681382, 139.766084); //位置の初期値 mOptions = { zoom: 16, center: LatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('mcanvas'), mOptions); pOptions = { position: LatLng, pov: {heading: 0, pitch: 0, zoom: 1.34 } //方角、仰角、ズームの初期値 }; pano = new google.maps.StreetViewPanorama(document.getElementById('pcanvas'), pOptions); marker = new google.maps.Marker({ map: map, position: LatLng, draggable: true }); google.maps.event.addListener(marker, 'position_changed', function(){ LatLng = marker.getPosition(); pano.setPosition(LatLng); }); } </script></head> <body onload='initialize()'> <div id='mcanvas' style='width:640px; height:240px'></div> <div id='pcanvas' style='width:640px; height:240px'></div> </body></html> 追記： ・ＡＰＩはバージョン３．１Ｘを使用（私は３．０のマーカーが嫌いなので） ・初期位置は東京駅ですが、ビューがないので空白になります
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 あくまでも独自マーカーにこだわるのであれば、マップとストリートビューを連動させる際には、それぞれの移動イベントを拾って逐次他方に反映させてあげるる必要があると思われます。 また、ビューの無い地点が指定された際の処理（デフォルトの表示がどうなるのか調べていませんが）についても考慮する必要があるかも知れません。 ＞js初心者のためアレンジできるかわかりませんが・・・ 初心者の度合いにもよりますが、多少ややこしいかも知れません。 頑張ってください。
お礼
度々ご回答ありがとうございます！ 是非参考にさせていただきます
- fujillin
- ベストアンサー率61% (1594/2576)
ストリートビューって、使ってみたことはほとんどありませんが… マップのデフォルトの人型を利用した方が、ビューの方向や既撮影の道路（青く表示される）などの機能がそのまま利用できるので便利ではないでしょうか？ あえて違うマーカーを利用する理由が見つからないので、人型を利用する例を （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style type="text/css"> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; } </style> <script type="text/javascript"> function initialize(){ var latlng = new google.maps.LatLng(35.688272,139.696459); var map = new google.maps.Map(document.getElementById("gMap"),{ zoom : 16, center : latlng, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true }); var view = new google.maps.StreetViewPanorama(document.getElementById("View"),{ position : latlng, pov : {heading:0, pitch:0} }); map.setStreetView(view); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="gMap"></div> <div id="View"></div> </body> </html> どうしても別のマーカーにする場合は、適当にアレンジしてください。 google mapのapiに関しては、かなり詳しく説明されていますので、たいていの情報は以下から入手できます。 https://developers.google.com/maps/documentation/javascript/reference?hl=ja
補足
回答ありがとうございます 人型のストリートビューとは別に、 今回はあえてマーカーからストリートビューを 表示させたくご質問させていただきました js初心者のためアレンジできるかわかりませんが、 教えていただいたURL等を参考にしてみます！ ありがとうございました
お礼
ご回答ありがとうございます 作成していただいたソースでできました！ こんなかっこいいマーカーもあったんですね 大変勉強になりました 是非使用させていただきます！