Question

180

Google Maps V3 - Remove all Markers

rated 0 times [ 181] [ 1] / answers: 1 / hits: 34377 / 12 Years ago, fri, september 21, 2012, 12:00:00

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?

Answers

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

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 12 Years ago darrylm · Accepted Answer

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

    }