Google Maps API 3 - Show/ Hide markers depending on zoom level
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); }});