title: Slider Hide/Show Google Map Markers
body: <p>I have a Google Map that renders markers and one of the arrays I build within the markers is <strong>arrTimeStamp</strong> This captures an integer 0 - 24 representing the hour a user logged in.  The slider displays 0 - currentHour (which is the current time rounded to the hour).  What I wish to do is hide/show the markers based on their time stamp relative to the slider value. </p>
  
  <p>Example if I have 10 markers logged in at 2pm and then 5 more at 3pm.  When the slider is on 3pm I should see all 15 markers on the map, but if I slide the slider to 2pm it should hide the 5 markers that are marked for 3pm, therefore only showing the 10 2pm markers.  If I slide the slider back to 3pm I see all 15 again.</p>
  
  <p>I attempted to use .setMap(null) .setMap(map) for my hide and show but this returns an undefined error on .setMap.  If I only use .setMap(null) if works fine and hides them, but this is a one way street as I can not show them again without .setMap(map).  I have seen several articles relating to the problems surrounding .setMap in this regard but I have not found a solution.  Any help would be appreciated.  Thank you.</p>
  
  <pre><code>var d = new Date();
  var currentHour = d.getHours()+1;
  
  $( "#slider" ).slider({
    value: currentHour,
    min: 0,
    max: currentHour,
    step: 1,
    slide: function( event, ui ) {
      $( "#amount" ).val(ui.value);
      var time = parseInt($('#amount').val());
  
      for(x = 0; x &lt;= arrMarkers.length; x++){
          arrMarkers[x].setMap((arrTimeStamp[x] &gt;= (currentHour - time)) ? null : map);
      }
  
    }
  });
  </code></pre>
  
  <p>Here is all my code for the map and slider.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var map;
  var arrMarkers = [];
  var arrInfoWindows = [];
  var arrTimeStamp = [];
  var timeStamp = 0;
  var marker = 0;
  var numLocations = 0;
  
  function mapInit()
  {
      var centerCoord = new google.maps.LatLng(40, -100); // USA
      var mapOptions = {
          zoom: 5,
          center: centerCoord,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
      var d = new Date();
      var currentHour = d.getHours()+1;
      $.getJSON("http://www.URL.com/superadmin/json/map-data.cfc?method=getFeedData&amp;feedType=location&amp;timespan=" + currentHour, {}, function(data)
      {
  
          $.each(data.DATA, function(i, item)
          {
  
              numLocations++;
              $('#locationsOnline').html(numLocations);
  
              // displays proper image for marker
              function markerinformation()
              {
                  var markerImage = 'http://www.URL.com/css/images/map_property_green_pin.png';
                  return markerImage;
              }
  
              markerTitle = item.LOCATIONNAME
  
  
              // creates the markers
              var marker = new google.maps.Marker(
              {
                  position: new google.maps.LatLng(item.LOCATIONLATITUDE, item.LOCATIONLONGITUDE),
                  map: map,
                  title: markerTitle,
                  icon: markerinformation()
              });
  
              arrMarkers[i] = marker;
  
              // infowindow content
              var infowindow = new google.maps.InfoWindow(
              {
                  content: "&lt;p&gt;&lt;b&gt;Location:&lt;/b&gt; " + item.LOCATIONNAME + "&lt;/p&gt;&lt;p&gt;&lt;b&gt;Customer:&lt;/b&gt; " + item.CUSTOMERNAME + "&lt;/p&gt;&lt;p&gt;" + item.LOCATIONCITY + ", " + item.LOCATIONSTATE + "&lt;/p&gt;"
              });
  
              arrInfoWindows[i] = infowindow;
  
              // "live" bind click event
              google.maps.event.addListener(marker, 'click', function()
              {
                  // this closes all open infowindows before opening the selected one
                  for(x = 0; x &lt; arrInfoWindows.length; x++)
                  {
                      arrInfoWindows[x].close();
                  }
                  infowindow.open(map, marker); // open the clicked marker infowindow
  
              });
  
              arrTimeStamp[i] = item.TIMESTAMP;
  
  
          });
      });
  
  
  }
  
  $(function() {
  
  mapInit(); // initialize map (create markers, infowindows, and list)
  var d = new Date();
  var currentHour = d.getHours()+1;
  
  $( "#slider" ).slider({
    value: currentHour,
    min: 0,
    max: currentHour,
    step: 1,
    slide: function( event, ui ) {
      $( "#amount" ).val(ui.value);
      var time = parseInt($('#amount').val());
  
      for(x = 0; x &lt;= arrMarkers.length; x++){
          arrMarkers[x].setMap((arrTimeStamp[x] &gt;= (currentHour - time)) ? null : map);
      }
  
    }
  });
  
    });
    &lt;/script&gt;
  </code></pre>