Google Maps API 3 - Show/ Hide markers depending on zoom level

Question

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.

var infowindow = new google.maps.InfoWindow(); var marker, i; var locations = [     ['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],     ['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],     ['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],     ['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png'] ]; /* Get the markers from the array */ for (i = 0; i < 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 <= 15) {         marker.setMap(null);     } else {                                    marker.setMap(map);     } }); 

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?

Answer 1

You need to save the markers in an array and iterate over them to show/hide them on the zoom event. You're only saving the last marker in your marker variable. You need a markers array. Also, you can use the setVisible method of the marker rather than using setMap.

var infowindow = new google.maps.InfoWindow(); var marker, i; var markers = []; var locations = [     ['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],     ['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],     ['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],     ['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png'] ]; /* Get the markers from the array */ for (i = 0; i < locations.length; i++) {       marker = new google.maps.Marker({         position: new google.maps.LatLng(locations[i][1], locations[i][2]),          map: map,         visible: true, // or false. Whatever you need.         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));     markers.push(marker); // save all markers }  /* Change markers on zoom */ google.maps.event.addListener(map, 'zoom_changed', function() {     var zoom = map.getZoom();     // iterate over markers and call setVisible     for (i = 0; i < locations.length; i++) {         markers[i].setVisible(zoom <= 15);     } });