グーグルマップAPIでグーグルマップの吹き出し（InfoWindow）内にストリートビューを表示する方法

グーグルマップAPIでは、グーグルマップの吹き出し（InfoWindow）内にストリートビューを表示することができます。

マーカーにクリックイベントを登録する際、InfoWindowにストリートビューオブジェクトを登録するだけで簡単に実装できます。

以下、googlemapのコードです。

var map;
var infowindow;
var marker;
var canvas = 'map';
var lat = '35.658704';
var lng = '139.745408';
var infoWindow = {
id: 'pano',
width: '400px',
height: '300px'
};
var latlng = new google.maps.LatLng(lat, lng);
google.maps.event.addDomListener(window, 'load', function(){
var mapdiv = document.getElementById(canvas);
map = new google.maps.Map(mapdiv);
map.setOptions({
zoom: 14,
center: latlng,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// マーカーをセットする
marker = new google.maps.Marker({
position: latlng,
map: map
});
// マーカーにclickイベントを登録  
google.maps.event.addListener(marker, 'click', function() {
// InfoWindowの設定
var infowindow = new google.maps.InfoWindow({
content: '<div id="' + infoWindow.id + '" style="width:'+ infoWindow.width + ';height:'+ infoWindow.height + '"></div>'
});
// InfoWindowにストリートビューを登録
google.maps.event.addListener(infowindow, 'domready', function() {
// ストリートビューのオプションを設定
var panoramaOptions = {
position: marker.getPosition(),
linksControl: false,
addressControl: false,
enableCloseButton: false,
panControl: false,
scrollwheel: false
};
// ストリートビューオブジェクトを生成
new  google.maps.StreetViewPanorama(document.getElementById(infoWindow.id), panoramaOptions);
});
infowindow.open(marker.getMap(), marker);
});
});

var map;

var infowindow;

var marker;

var canvas = 'map';

var lat = '35.658704';

var lng = '139.745408';

var infoWindow = {

id: 'pano',

width: '400px',

height: '300px'

};

var latlng = new google.maps.LatLng(lat, lng);

google.maps.event.addDomListener(window, 'load', function(){

var mapdiv = document.getElementById(canvas);

map = new google.maps.Map(mapdiv);

map.setOptions({

zoom: 14,

center: latlng,

mapTypeControl: true,

mapTypeId: google.maps.MapTypeId.ROADMAP

});

// マーカーをセットする

marker = new google.maps.Marker({

position: latlng,

map: map

});

// マーカーにclickイベントを登録

google.maps.event.addListener(marker, 'click', function() {

// InfoWindowの設定

var infowindow = new google.maps.InfoWindow({

content: '<div id="' + infoWindow.id + '" style="width:'+ infoWindow.width + ';height:'+ infoWindow.height + '"></div>'

});

// InfoWindowにストリートビューを登録

google.maps.event.addListener(infowindow, 'domready', function() {

// ストリートビューのオプションを設定

var panoramaOptions = {

position: marker.getPosition(),

linksControl: false,

addressControl: false,

enableCloseButton: false,

panControl: false,

scrollwheel: false

};

// ストリートビューオブジェクトを生成

new google.maps.StreetViewPanorama(document.getElementById(infoWindow.id), panoramaOptions);

});

infowindow.open(marker.getMap(), marker);

});

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル