title: populate array value from li elements, remove hidden li from array
body: <p>I have a map with populated with markers (pins) represented by li of an ul  (each li has 2 divs defining lat &amp; long data). These li are sorted into categories from a drop-down menu (select tag) with hide/show. When the select value changes, I want only the visible li markers to populate the map. </p>
  
  <p>I need help with my code to remove hidden markers when the select value changes. Currently, all markers remain on the map when li are hidden. Can you see what I'm doing wrong?</p>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
  var licounter = 0;
  
      $("#mapContent ul li").each(function(index) {
        licounter ++;
        if ($("#mapContent ul li:hidden")){
          markers.splice(licounter, 1);
          licounter --;
        };
      });
  });
  });
  </code></pre>
  
  <p>Here is the full code if that helps:</p>
  
  <pre><code>var mapStart = new google.maps.LatLng(41.8819,-87.823);
  var markers;
  var map;
  var infowindow = new google.maps.InfoWindow();
  
  function initialize() {
  markers = new Array();
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: mapStart
  };
  
  map = new google.maps.Map(document.getElementById("map"),
          mapOptions);
  
  
  
  $("#mapContent ul li").each(function(index) {
  
      var marker = new google.maps.Marker({
      position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()),
      map: map,
      animation: google.maps.Animation.DROP,
      icon: 'images/marker.png',
      title : $(this).children(".marker_title").text()
      });
  
      markers.push(marker);
  });
  }
  
  $(document).ready(function(){
  var licounter = 0;
  
  $('select[name="mapCat"]').change(function(){
  
      var chosenCat =$(this).val();       
      $('#mapContent ul li').hide();
      $('#mapContent ul li.'+chosenCat).show();
      if (chosenCat == 'opt0'){
          $('#mapContent ul li').show();
      };
  
  
      $("#mapContent ul li").each(function(index) {
        licounter ++;
        if ($("#mapContent ul li:hidden")){
          markers.splice(licounter, 1);
          licounter --;
        };
      });
  });
  });
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>