最新閲覧日:

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>

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

「GoogleMapsAPIのストリートビ」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (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 …
<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>

追記:
・APIはバージョン3.1Xを使用(私は3.0のマーカーが嫌いなので)
・初期位置は東京駅ですが、ビューがないので空白になります
    • good
    • 0
この回答へのお礼

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

作成していただいたソースでできました!
こんなかっこいいマーカーもあったんですね
大変勉強になりました
是非使用させていただきます!

お礼日時:2014/01/14 00:19

ANo1です。



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

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

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

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

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



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

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

<!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
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


人気Q&Aランキング

おすすめ情報