Question

-2

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

rated 0 times [ 0] [ 2] / answers: 1 / hits: 33411 / 11 Years ago, mon, november 18, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zainsagez

Add To Favorites

Follow

Total Points: 555

Total Questions: 99

Total Answers: 96

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

answered 11 Years ago briannar · Accepted Answer

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

    }

});