title: Google Maps API 3 - Show/ Hide markers depending on zoom level
body: <p>I'm trying to show/hide some google map markers depending on the zoom level. I've had a look on here for the answers and while I've got a better idea of what I'm meant to be doing I haven't had any luck being able to implement it into my google map.</p>
  
  <pre><code>var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var locations = [
      ['&lt;div style="width: 170px;"&gt;Title1&lt;/div&gt;', 50.794785, -1.116947, image],
      ['&lt;div style="width: 190px;"&gt;Title2&lt;/div&gt;', 50.797, -1.109, image],
      ['&lt;div style="width: 120px;"&gt;Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
      ['&lt;div style="width: 150px;"&gt;Title4&lt;/div&gt;', 50.794703, -1.117880, '../images/map-pointer.png']
  ];
  /* Get the markers from the array */
  for (i = 0; i &lt; locations.length; i++) {  
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
          map: map,
          icon: locations[i][3],
          zIndex: 10
      }); 
      /* Open marker on mouseover */
      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
      }
      })(marker, i));
  }
  /* Change markers on zoom */
  google.maps.event.addListener(map, 'zoom_changed', function() {
  var zoom = map.getZoom();
  
      if (zoom &lt;= 15) {
          marker.setMap(null);
      } else {                           
          marker.setMap(map);
      }
  });
  </code></pre>
  
  <p>The markers are plotting okay but the zoom function I'm trying to do doesn't seem to work at all - am I doing it wrong?</p>