Google地图标记不会在复选框操作时移除

Question

I was having some problem trying to filter the list fetched from database upon checkbox action and plot/clear markers onto map. Here is my checkbox declaration in HTML:

<div class="">
     <label>
          <input type="checkbox" class="js-switch" name="tags" value="3" onchange="filterList()" unchecked/> MRT Incidents
     </label>
</div>

When checkbox onchange, I am filtering the list fetched from database:

        function filterList(){
        var tags = document.getElementsByName('tags');
        var i = 0;
        {% for crisis in data %}  
            // code to store fields in database into local var

            for( ; i < tags.length; i++ )
            {
                if( tags[i].checked ) {
                    value = tags[i].value;
                    // I got 4 category 1-fire, 2-flood, 3-mrt, 4-dengue
                        // what I am doing here is check if the checkbox value is equal to the category ID from database, if equal, I push them into the filteredList

                    if(value == category){
                        filteredList.push({
                            // all the fields
                        });
                    }                        break;
                }else{
                        value = tags[i].value;
                        if(value == category){
                            filteredList = [];
                            setMapOnAll(null);
                        }
                    }
            }
        {% endfor %}

    addMarker(filteredList);
    }

Then in my addMarker with filteredList parameter:

function addMarker(filteredList){ 
        for(var i = 0; i < filteredList.length; i++){
        myLatLng = {lat: parseFloat(filteredList[i].lat), lng: parseFloat(filteredList[i].lng) };

        marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            clickable: true
        });
}

My plotting works weird as well. When I try to check multiple box, let's say I checked the first one, it plotted out. Then I proceed to check the second, it does not plot out but only plot out after I uncheck the first one.

When I try to uncheck the checkbox, the markers on the map are not removed. Instead, it just stay there forever and stacked more and more when I check/uncheck a few times.

Why is it so? Thanks in advance!

Answer 1

From what I can see in your code, you are adding the markers over and over again? This probably explains why you are having weird plotting (and you will run out of memory sooner or later). I think you are using the wrong approach though for marker filtering on a Google Map.

You'll need to make changes to your code, here are the main guidelines :

• You need an array/object to store all the marker objects you placed on the map
• You can store the categorie(s) for each marker in that same object i.e. [{markerObj:marker, categories:[1,5,6]}]
• When a checkbox changes (onchange) you loop through all the checkboxes and get their values then you loop through all the markers in your marker array/object and check if it needs to be filtered or not.
• If you want to hide a marker just call the setVisible function i.e. markerObj.setVisible(false)

Here's a working example! https://jsfiddle.net/fjqagp8o/1/