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

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);    }});