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

google-maps, google-maps-api-3, javascript, jquery

Solution

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

Problem

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?

Original source