title: Closing InfoWindow - Closing onclick - Google Map
body: <p>I cant for the life of me get only one infoWindow to display at a time in V3 of API. I need one to close prior to the next opening.  Also looking to have the infoWindow close onclick anywhere on the map.  Does this go within the initialize function?</p>
  
  <p>Here is my full script: </p>
  
  <pre><code>// defining vars
  var map = null;
  var markers = [];
  var adUnit;
  var center = new google.maps.LatLng(39.676502,-105.162101);
  
  // function that soley initializes the new map object
  function initialize() {
  
      var mapOptions = {
          zoom: 10,
          center: center,
              mapTypeControl: true,
              mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
              },
              zoomControl: true,
                      zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.SMALL,
                        position: google.maps.ControlPosition.LEFT_BOTTOM
                      },
              panControl: false,
          mapTypeId: google.maps.MapTypeId.TERRAIN
      }
      map = new google.maps.Map($('#map_canvas')[0], mapOptions);
      // call the loader function
      loadXML();
  
      // Adsense Options                                 
      var adUnitDiv = document.createElement('div');
      var adUnitOptions = {
        format: google.maps.adsense.AdFormat.BUTTON,
        position: google.maps.ControlPosition.RIGHT_BOTTOM,
        publisherId: 'ca-google-maps_apidocs',
        map: map,
        visible: true
      };
      adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);     
  
        google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
          });                       
  
  
  } //&lt;-- Initialize
  
  // load (and map) the markers from XML data
  function loadXML() {
      $.get('data.xml', function(data) {
          // var bounds = new google.maps.LatLngBounds();   //&lt;--- Size map to bounds of markers LatLng
          $(data).find('marker').each(function() {
  
              var lat = $(this).attr('lat')
              var lng = $(this).attr('lng')
              var name = $(this).attr('name')
              var type = $(this).attr('type')
  
              var LatLng   = new google.maps.LatLng(parseFloat($(this).attr('lat')),
                                      parseFloat($(this).attr('lng')));
  
              var myToggleData = {                    //&lt;---- collecting data to be toggled on/off
                  type      : $(this).attr('type'),
                  skill         : $(this).attr('skill'),
                  eta_whatever_that_means : parseFloat($(this).attr('eta'))
              }        
  
              var marker      = new google.maps.Marker({
                  position : LatLng,
                  map         : map,
                  icon     : 'images/marker.png',
                  title     : $(this).attr('name'),
                  data     : myToggleData
              });
  
                var html ='&lt;div id="winBackground"&gt;          &lt;div class="winTitle"&gt;' + name + '&lt;/div&gt;          &lt;div class="winHead"&gt;Type: &lt;div class="winData"&gt;' + type + '&lt;/div&gt;&lt;/div&gt;   &lt;/div&gt;';
  
  
                // create the infoWindow
                var infoWindow = new google.maps.InfoWindow();
                // add a listener to open the infoWindow when a user clicks on one of the markers
                google.maps.event.addListener(marker, 'click', function() {
                  infoWindow.setContent(html);
                  infoWindow.open(map, marker);
                });
  
              markers.push(marker);
              // bounds.extend(LatLng);
          });
  
  
          // map.fitBounds(bounds);
      });
  }
  // The toggleMarker function
  function toggleMarkers(attr,val) {
      if (markers){
          for (i in markers) {
              if(markers[i].data[attr] == val){
                  var visibility = (markers[i].getVisible() == true) ? false : true;
                  markers[i].setVisible(visibility);
              }
          }
      }
  }
  </code></pre>