グーグルマップAPIでグーグルマップの吹き出し（InfoWindow）内にストリートビューを表示する方法
グーグルマップAPIでは、グーグルマップの吹き出し（InfoWindow）内にストリートビューを表示することができます。
マーカーにクリックイベントを登録する際、InfoWindowにストリートビューオブジェクトを登録するだけで簡単に実装できます。
以下、googlemapのコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 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); }); }); |