google maps api v3 の複数の『吹き出し』を一気に全部閉じるにはどうしたらよいでしょうか？？？

google maps apiのマーカーから出る吹き出しを
一つづつ出して、一つづつ閉じる、説明は多々みかけるのですが・・・
複数、一気に吹き出しを出して、一気に閉じるにはどうしたら宜しいか、わかる方いらっしゃりましたら、ご教授お願い致します・・・
例えばこれは、一つ出して、一つ消すみたいなことの説明です
↓
http://goo.gl/M7Ddc
↑
この応用なんでしょうが・・・
なんとも、僕には解決できませんでした・・・

行動規範の内容に同意します

回答1件

ベストアンサー

例えばwindowオブジェクトとマーカーオブジェクトを配列に持っていて
各イベントのタイミングで配列に設定された全オブジェクトに対して処理を行えば可能です。

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8" />
5  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
6  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
7  <script type="text/javascript">
8    $(function(){
9      var datas = [
10        {lat: 29.97516,  lon: 31.137657, title: 'title 01', content: 'content 01'},
11        {lat: 29.974695, lon: 31.138340, title: 'title 02', content: 'content 02'}
12      ];
13      var mainLatlng = new google.maps.LatLng(29.975083, 31.137895);
14      var myOptions={
15        zoom: 18,
16        center: mainLatlng,
17        mapTypeId: google.maps.MapTypeId.HYBRID
18      };
19      var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
20      var windowList = [];
21      var markerList = [];
22      for (var i=0; i<datas.length; i++) {
23        var contentString = '<dl><dt style="font-weight:bold;">'+datas[i]['title']+'</dt><dd>'+datas[i]['content']+'</dd></dl>';
24        var infowindow = new google.maps.InfoWindow({content: contentString});
25        var marker = new google.maps.Marker({
26          position: new google.maps.LatLng(datas[i]['lat'], datas[i]['lon']),
27          map: map,
28          title: datas[i]['title']
29        });
30        windowList.push(infowindow);
31        markerList.push(marker);
32        google.maps.event.addListener(marker, 'click', function() {
33          for (var j=0; j<windowList.length; j++) {
34            windowList[j].open(map, markerList[j]);
35          }
36          $("#btn_show").prop("disabled", true);
37          $("#btn_hide").prop("disabled", false);
38        });
39        google.maps.event.addListener(infowindow, 'closeclick', function() {
40          for (var j=0; j<windowList.length; j++) {
41            windowList[j].close();
42          }
43          $("#btn_show").prop("disabled", false);
44          $("#btn_hide").prop("disabled", true);
45        });
46      }
47      $("#btn_show").bind("click",function(){
48        for (var i=0; i<windowList.length; i++) {
49          windowList[i].open(map, markerList[i]);
50        }
51        $("#btn_show").prop("disabled", true);
52        $("#btn_hide").prop("disabled", false);
53      });
54      $("#btn_hide").bind("click",function(){
55        for (var i=0; i<windowList.length; i++) {
56          windowList[i].close();
57        }
58        $("#btn_show").prop("disabled", false);
59        $("#btn_hide").prop("disabled", true);
60      });
61    });
62  </script>
63</head>
64<body>
65  <p>
66    <input type="button" id="btn_show" value="情報ウィンドウ表示" />
67    <input type="button" id="btn_hide" value="情報ウィンドウ非表示" disabled />
68  </p>
69  <div id="map_canvas" style="width:400px;height:400px;"></div>
70</body>
71</html>