Google Maps V3 - Remove all Markers

Question

I want with google maps v3 that if you zoom-in higher than 15 the map show the marker locations but when you zoom-out i want to hide the markers. I can't find any function to do this. Nothing has worked for me so far.

So this is my script:

<script type="text/javascript">
        function initialize() {
            var mapOptions = {
              zoom: 15,
              center: new google.maps.LatLng(52.429236, 6.281255),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            setMarkers(map, points);

            google.maps.event.addListener(map, 'zoom_changed', function()
{
                        if (map.getZoom() > 15) {
                                setMarkers(map, points);
                        } else {
                                hideMarkers(map, points);

                        }
                           }); 

        }


        var points = [
            ['Location 1', 52.420891, 6.280204],
            ['Location 2', 52.420125, 6.279131],
            ['Location 3', 52.420125, 6.240125]
        ];


        function setMarkers(map, locations) {
            var image = new google.maps.MarkerImage('../images/map/beachflag.png',
            new google.maps.Size(20, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png',
            new google.maps.Size(37, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shape = {
                coord: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };

            for (var i = 0; i < locations.length; i++) {
                var point = locations[i];
                var myLatLng = new google.maps.LatLng(point[1], point[2]);
                var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                shadow: shadow,
                icon: image,
                shape: shape,
                title: point[0]
                });
            }
        }

        function hideMarkers(map, locations) {
            /* Remove All Markers */


            console.log("Remove All Markers");
        }
            </script>

Please can anybody help me whith this?

Answer 1

I modified your code. I am keeping the reference of all markers in an array. and inside hideMarkers i am setting their map as null to remove them from map.

 function initialize() {
        var mapOptions = {
            zoom : 15,
            center : new google.maps.LatLng(52.429236, 6.281255),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        var markers = setMarkers(map, access_points);

        google.maps.event.addListener(map, 'zoom_changed', function() {
            if (map.getZoom() > 15) {
                setMarkers(map, access_points);
            }
            else {
                hideMarkers(map, access_points, markers);

            }
        });

    }

    var access_points = [ [ 'Location 1', 52.420891, 6.280204 ], [ 'Location 2', 52.420125, 6.279131 ], [ 'Location 3', 52.420125, 6.240125 ] ];

    function setMarkers(map, locations) {
        var markers= [];
        var image = new google.maps.MarkerImage('../images/map/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0,
                32));
        var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0, 0),
                new google.maps.Point(0, 32));
        var shape = {
            coord : [ 1, 1, 1, 20, 18, 20, 18, 1 ],
            type : 'poly'
        };

        for ( var i = 0; i < locations.length; i++) {
            var access_point = locations[i];
            var myLatLng = new google.maps.LatLng(access_point[1], access_point[2]);
            var marker = new google.maps.Marker({
                position : myLatLng,
                map : map,
                shadow : shadow,
                icon : image,
                shape : shape,
                title : access_point[0],
                zIndex : access_point[3]
            }); 
            markers.push(marker);
        }
        return markers;
    }

    function hideMarkers(map, locations, markers) {
        /* Remove All Markers */
        while(markers.length){
            markers.pop().setMap(null);
        }

        console.log("Remove All Markers");
    }

Answer 2

The easiest way is probably to modify your code slightly, so that your markers are contained in an array that's accessible to both the setMarkers and hideMarkers functions. You can then use the setMap method of the Marker class to add/remove the marker from your map (pass null to setMap to remove the marker from the map):

var markers = [];

function createMarkers(/* some args */) {
    // Create your markers, and add each one to the `markers` array
}

function setMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(yourMap); //Add the marker to the map
    }
}

function hideMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null); //Remove the marker from the map
    }
}

This approach also means that you don't recreate all your Marker instances every time you want to show them.