javascript - Google map markers not removing upon checkbox action -

i having problem trying filter list fetched database upon checkbox action , plot/clear markers onto map. here 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, filtering list fetched database:

        function filterlist(){         var tags = document.getelementsbyname('tags');         var = 0;         {% crisis in data %}               // code store fields in database local var              for( ; < tags.length; i++ )             {                 if( tags[i].checked ) {                     value = tags[i].value;                     // got 4 category 1-fire, 2-flood, 3-mrt, 4-dengue                         // doing here check if checkbox value equal category id database, if equal, push them filteredlist                      if(value == category){                         filteredlist.push({                             // fields                         });                     }                        break;                 }else{                         value = tags[i].value;                         if(value == category){                             filteredlist = [];                             setmaponall(null);                         }                     }             }         {% endfor %}      addmarker(filteredlist);     } 

then in addmarker filteredlist parameter:

function addmarker(filteredlist){          for(var = 0; < 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 well. when try check multiple box, let's checked first one, plotted out. proceed check second, not plot out plot out after uncheck first one.

when try uncheck checkbox, markers on map not removed. instead, stay there forever , stacked more , more when check/uncheck few times.

why so? in advance!

from can see in code, adding markers on , on again? explains why having weird plotting (and run out of memory sooner or later). think using wrong approach though marker filtering on google map.

you'll need make changes code, here main guidelines :

• you need array/object store marker objects placed on map
• you can store categorie(s) each marker in same object i.e. [{markerobj:marker, categories:[1,5,6]}]
• when checkbox changes (onchange) loop through checkboxes , values loop through markers in marker array/object , check if needs filtered or not.
• if want hide marker call setvisible function i.e. markerobj.setvisible(false)

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