title: Hide/show google maps markers based on slider value compared to data value
body: <p>First off, I don't know much about Google maps or Javascript and most of what I have so far is copied and pasted and stuck together from various tutorials (although I do understand what does what). </p>
  
  <p>I have a map showing markers based on their location from a spreadsheet (via JSON feed). In this spreadsheet I also have a numerical value stored for each marker in data[i][4]. </p>
  
  <p>Finally have a bog standard html input type range slider and have the value of this stored in a global variable (slidervalue) that constantly updates as the slider moves.</p>
  
  <p>As the slider moves, if the numerical value stored in the data for a marker is less than slidervalue that marker should be visible. If the data value is greater than slidervalue that marker should be hidden. </p>
  
  <p>I assume this can be achieved using an if else statement and Google maps setvisible.</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Pound A Pint&lt;/title&gt;
  
  
      &lt;style&gt;
        html, body {
          margin: 0;
          padding: 0;
          width:100%;
          height: 100%;
        }
  
        #map_canvas {
          height: 100%;
          width: calc(100% - 200px);
          float:right;
        }
  
        #name {
          float:left;
        }
  
        #price {
          float:left;
        }
  
        #sliderAmount {
          background-color: red;
          display: inline-block;
        }
  
      &lt;/style&gt;
  
      &lt;script src="https://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        // The web service URL from Drive 'Deploy as web app' dialog.
        var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwFFhKaVFHsr1g6sokrXd1kXPU0mbdKZzpVXE00X4CzS0nfng/exec?jsonp=callback";
        var map;
        var image = 'icon.png';
        var slidervalue = 400;
  
  
           function myFunction()
            {
            document.getElementById("sliderAmount").innerHTML= slidervalue;
            }
  
        function initialize() {
          map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: new google.maps.LatLng(51.5, -0.1),
            zoom: 12,
            mapTypeControl: false,
            panControl: false,
            zoomControlOptions: {
              style: google.maps.ZoomControlStyle.default,
              position: google.maps.ControlPosition.LEFT_BOTTOM
              }
          });
  
  
          var scriptElement = document.createElement('script');
          scriptElement.src = DATA_SERVICE_URL;
          document.getElementsByTagName('head')[0].appendChild(scriptElement);
        }
  
        function callback(data) {
          for (var i = 0; i &lt; data.length; i++) {
            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(data[i][3], data[i][2]),
              map: map,
              icon: image
            });
  
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            document.getElementById("name").innerHTML= data[i][0];
            document.getElementById("pricespan").innerHTML= data[i][4];
          }
        })(marker, i));
          }
        }
  
          function updateSlider(slideAmount) {
            slidervalue = slideAmount;
            document.getElementById("slidervalue").innerHTML = slidervalue;
        }
  
      &lt;/script&gt;
  
  
    &lt;/head&gt;
  
    &lt;body onload="initialize()"&gt;
      &lt;div id="name"&gt;Name&lt;/div&gt;
      &lt;div id="price"&gt;£&lt;span id="pricespan"&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;input id="slide" type="range" min="1" max="500" step="1" value="400" onchange="updateSlider(this.value)"&gt;
  &lt;div onclick="myFunction()" id="sliderAmount"&gt;Click me&lt;/div&gt;
  &lt;div id="slidervalue"&gt;&lt;/div&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks for any help.</p>