title: Google Maps API V3: close all infoboxes when a new one is opened
body: <p>I'm working with Google Maps API V3 and <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/reference.html" rel="nofollow noreferrer">infoboxes</a>, and I'm trying to set it up so that only one infobox is open at any given time. </p>
  
  <p>I've seen <a href="https://stackoverflow.com/questions/11296235/google-maps-api-v3-closing-infobox">a</a> <a href="https://stackoverflow.com/questions/7308875/google-maps-api-infobox-plugin-and-multiple-markers">ton</a> <a href="https://stackoverflow.com/questions/12102598/trigger-event-with-infowindow-or-infobox-on-click-google-map-api-v3">of</a> <a href="https://stackoverflow.com/questions/6548225/close-infobox-when-clicking-on-the-map">related</a> <a href="https://stackoverflow.com/questions/5429444/google-maps-api-v3-event-mouseover-with-infobox-plugin">threads</a>, but I can't figure out how to modify them to get them to work. I vaguely know that it needs to be bound to a </p>
  
  <pre><code>google.maps.event.addListener(map,'click',function() {
  
  });
  </code></pre>
  
  <p>but that's pretty much the extent of what I could figure out. </p>
  
  <p>Here's my code: </p>
  
  <pre><code>var boxList =[]
  
  function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(35.542284,-76.856),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
  
      $(document).ready(function(){
          $.getJSON('test.json', function(data) {
  
                  for (i = 0; i &lt; data.length; i++) {
                      var item = data[i];
                      var myLatlng = new google.maps.LatLng(item.lat, item.longs);
                      var contentString = item.name;
  
                      // accidentally left this extraneous code in here...
                      // var infowindow = new google.maps.InfoWindow({
                      //    content: item.name
                      // });
  
                      var marker = new google.maps.Marker({
                          position: myLatlng,
                          map: map,
                          title: item.name,
                          icon: item.type + ".png"
  
                      }); // end add new marker
  
                      var boxText = document.createElement("div");
                      boxText.style.cssText = "border: 1px solid black;";
                      boxText.innerHTML = item.name;
  
                      var myOptions = {
                          content: boxText,
                          boxStyle: {
                                opacity: 0.75,
                                width: "280px"
                              },
                          closeBoxMargin: "12px 4px 2px 2px",
                      };
  
  
                      var ib = new InfoBox(myOptions);
                      boxList.push(ib);
  
                      google.maps.event.addListener(marker,'click',
                      (function(marker, i) {
                          return function() {
                              boxList[i].open(map, this);
                          }
                      })(marker, i));
  
                  } //end for loop 
  
          }) // end getJSON
  
      }); // end jQuery
  
  } // end initialize
  </code></pre>
  
  <p>EDIT: I should mention that I got this working with InfoWindows <a href="http://koti.mbnet.fi/ojalesa/boundsbox/attachinfowindow.htm" rel="nofollow noreferrer">using this plugin</a>, but I need to be able to style them to match a specific look and feel for a website, which is the only reason I'm even banging my head against InfoBoxes to begin with. </p>
  
  <p>I would really appreciate any pointers in the right direction! Thanks in advance. </p>