title: Google maps add infowindow listener on zoom change
body: <p>I would like to add a infowindow to each marker I have and have the infowindow open when the zoom has changed.
  I have tried add a standard onclick infowindow and it works, but the "zoom_changed" does not work.</p>
  
  <p>Here is the complete code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;NextNine customer map&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;META HTTP-EQUIV="Refresh" CONTENT="500"&gt;
      &lt;style&gt;
        html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px
        }
  
         .labels {
       color: black;
       background-color: #6699FF;
       font-family: "Lucida Grande", "Arial", sans-serif;
       font-size: 10px;
       font-weight: bold;
       text-align: center;
       width: 100px;     
       border: 2px solid #6699FF;
       white-space: nowrap;}
      &lt;/style&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://jquery-xml2json-plugin.googlecode.com/svn/trunk/jquery.xml2json.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/src/markerwithlabel.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  var markers = [];
  var map = null;
  var counter =0;
  var counter_part =0;
  
  var contencts = new Array();
  contencts [0] = "NextNine89";
  contencts [1] = "NextNine69";
  
  function initialize() {
      var chicago = new google.maps.LatLng(35.890026,-5.523652);
      var mapOptions = {
          zoom: 3,
          center: chicago,
          mapTypeId: google.maps.MapTypeId.ROADMAP 
    }
  
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  
    $.get('Customers.xml', function(xml) {
        var jsonObj = $.xml2json(xml);
          $.each(jsonObj.Marker, function(){
              var stat = this.status == "Critical" ? 'http://maps.google.com/mapfiles/ms/micons/red-dot.png' : 'http://maps.google.com/mapfiles/ms/micons/green-dot.png';
                   var mark = {
                          title: this.title,
                          latitude: this.latitude,
                          longitude: this.longitude,
                          icon: stat
                          }
                  markers.push(mark);
          });
          for(var i=0; i&lt; markers.length; i++){
            var lon = markers[i].longitude;
            var lat = markers[i].latitude;
            var image = markers[i].icon;
            var custname = markers[i].title;
            PlaceMarker(lat,lon, image, custname); 
          } 
  });     
  
  function PlaceMarker(lat, lon, image, custname) {
  
       var myLatlng = new google.maps.LatLng(lat,lon);
       var marker = new MarkerWithLabel({
         position: myLatlng,
         map: map,
         icon: image,
         labelContent: custname,
         labelAnchor: new google.maps.Point(22, 0),
         labelClass: "labels", // the CSS class for the label
         labelStyle: {opacity: 0.75}
       });
  
       var infowindow = new google.maps.InfoWindow({
        content: 'Site Info:'});
  
       google.maps.event.addListener(marker, 'zoom_changed', function() {
      infowindow.open(map,marker);});
  }
  
  function recenter ()
  {
      var location = new google.maps.LatLng(markers[counter].latitude,markers[counter].longitude);
      map.setCenter (location);
      map.setZoom (9);
  }
  
  function centerback()
  {
      var location = new google.maps.LatLng(35.890026,-5.523652);
      map.setCenter (location);
      map.setZoom (3);
  }
  
  window.setInterval(function(){
    recenter();
    if(counter==(markers.length-1))
    {
      counter=0;
      counter_part=0;
      centerback();
    }
    else
    {
      if(counter_part==5)
      {
          centerback();
          counter_part=0;}
      else
          {
              recenter();
              counter++;
              counter_part++;}
    }
  
  }, 15000);
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
       &lt;div id="map-canvas"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Every X seconds I zoom in on a different marker, when I zoom in I would like to open a infowindow. Once I zoom to a different marker I want the infowindow to close. </p>