###Google Maps API 1つだけの情報ウィンドウが開くようにする
Google Maps API、苦心の末なんとか複数の情報ウインドウを開くことができるようになりました。
ここから1つだけの情報ウィンドウが開くようにするにはどのように書き換えれば良いのでしょうか。
###実際のソースコード
JavaScript
1<script> 2(function(){ 3 "use strict"; 4 var mapData = { pos: { lat:32.18075, lng:31.47062 }, zoom: 9 }; 5 6 var markerData = [ 7 8 { 9 pos: { lat: 32.054, lng: 31.855805 }, 10 title: "産業技術学校", 11 icon: { url: "icon_school.png" ,scaledSize: new google.maps.Size( 25, 25 ) }, 12 infoWindowOpen: false , 13 infoWindowContent: '産業技術学校' 14 }, 15 { 16 pos: { lat: 32.43458, lng: 31.42178 }, 17 title: "総合支援学校", 18 icon: { url: "icon_school.png" ,scaledSize: new google.maps.Size( 25, 25 ) }, 19 infoWindowOpen: false , 20 infoWindowContent: '総合支援学校' 21 }, 22 23 24 25 ]; 26 var map = new google.maps.Map(document.getElementById('map'), { 27 center: mapData.pos, 28 zoom: mapData.zoom 29 }); 30 for( var i=0; i < markerData.length; i++ ) 31 { 32 (function(){ 33 var marker = new google.maps.Marker({ 34 position: markerData[i].pos, 35 title: markerData[i].title, 36 icon: markerData[i].icon, 37 map: map 38 }); 39 if( markerData[i].infoWindowContent ) 40 { 41 var infoWindow = new google.maps.InfoWindow({ 42 content: markerData[i].infoWindowContent 43 }); 44 marker.addListener('click', function(){ 45 infoWindow.open(map, marker); 46 }); 47 if( markerData[i].infoWindowOpen ) 48 { 49 infoWindow.open(map, marker); 50 } 51 } 52 }()); 53 } 54}()); 55</script>
###試したコード
上記のコードの最下部に以下を記入しました。
JavaScript
1var marker = new google.maps.Marker(markerOpts); 2 google.maps.event.addListener(marker, "click", function(){ 3 //先に開いた情報ウィンドウがあれば、closeする 4 if (currentInfoWindow) { 5 currentInfoWindow.close(); 6 } 7 //情報ウィンドウを開く 8 infoWnd.open(map, marker); 9 10 currentInfoWindow = infoWnd; 11 }); 12 return marker; 13 } 14 window.onload = initialize;
ページが真っ白になりマップが表示されません。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/18 04:39
2017/07/18 06:29