GoogleMapsAPIのストリートビュー

解決済

質問者：kokorock_goo
質問日時：2014/01/09 13:10
回答数：3件

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>

///////////////////////////////////////////////

通報する

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

質問の本文を隠す

回答 (3件)

No.1

回答者： fujillin
回答日時：2014/01/09 19:07

ストリートビューって、使ってみたことはほとんどありませんが…

マップのデフォルトの人型を利用した方が、ビューの方向や既撮影の道路（青く表示される）などの機能がそのまま利用できるので便利ではないでしょうか？

あえて違うマーカーを利用する理由が見つからないので、人型を利用する例を
（全角空白は半角に）

<!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" …

<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 …

この回答への補足

回答ありがとうございます

人型のストリートビューとは別に、
今回はあえてマーカーからストリートビューを
表示させたくご質問させていただきました

js初心者のためアレンジできるかわかりませんが、
教えていただいたURL等を参考にしてみます！
ありがとうございました

補足日時：2014/01/10 00:29

通報する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2014/01/10 10:03

ANo1です。

あくまでも独自マーカーにこだわるのであれば、マップとストリートビューを連動させる際には、それぞれの移動イベントを拾って逐次他方に反映させてあげるる必要があると思われます。
また、ビューの無い地点が指定された際の処理（デフォルトの表示がどうなるのか調べていませんが）についても考慮する必要があるかも知れません。

＞js初心者のためアレンジできるかわかりませんが・・・
初心者の度合いにもよりますが、多少ややこしいかも知れません。
頑張ってください。

- 0
- 件

通報する

この回答へのお礼

度々ご回答ありがとうございます！
是非参考にさせていただきます

通報する

お礼日時：2014/01/14 00:11

No.3ベストアンサー

回答者： yagijijii
回答日時：2014/01/13 11:44

提示されたソースコードの修正ではなく、自分で作成したものですが、

参考になりそうでしたら、ご利用ください。

尚、このページの単純コピペだと、変なところで改行されて動作不良と
なることがあるようなので、適宜修正してください。

//////////　以下ソース

<!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 …
<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>

追記：
・ＡＰＩはバージョン３．１Ｘを使用（私は３．０のマーカーが嫌いなので）
・初期位置は東京駅ですが、ビューがないので空白になります