title: Google map markers not removing upon checkbox action
body: <p>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:</p>
  
  <pre><code>&lt;div class=""&gt;
       &lt;label&gt;
            &lt;input type="checkbox" class="js-switch" name="tags" value="3" onchange="filterList()" unchecked/&gt; MRT Incidents
       &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When checkbox onchange, I am filtering the list fetched from database:</p>
  
  <pre><code>        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 &lt; 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);
      }
  </code></pre>
  
  <p>Then in my addMarker with filteredList parameter:</p>
  
  <pre><code>function addMarker(filteredList){ 
          for(var i = 0; i &lt; 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
          });
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Why is it so? Thanks in advance!</p>