Hide/show google maps markers based on slider value compared to data value

StackOverflow https://stackoverflow.com/questions/21076505

Question

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).

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].

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.

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.

I assume this can be achieved using an if else statement and Google maps setvisible.

Here is my code so far:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pound A Pint</title>


    <style>
      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;
      }

    </style>

    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>

    <script>
      // 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 < 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;
      }

    </script>


  </head>

  <body onload="initialize()">
    <div id="name">Name</div>
    <div id="price">£<span id="pricespan"></span></div>
<input id="slide" type="range" min="1" max="500" step="1" value="400" onchange="updateSlider(this.value)">
<div onclick="myFunction()" id="sliderAmount">Click me</div>
<div id="slidervalue"></div>
    <div id="map_canvas"></div>
  </body>
</html>

Thanks for any help.

Was it helpful?

Solution

  1. create a global accessible array: 

    markers=[];

  2. store the markers in this array, and store the numeric value as a property of the markers:

      var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data[i][3], data[i][2]),
    map: map,
    value:data[i][4],
    visible:slidervalue >= data[i][4]
  });
  markers.push(marker);

  3. in updateSlider iterate over the array and set the visible-property depending on the comparision:

    function updateSlider(slideAmount) {
  for(var i=0;i<markers.length;++i){
     markers[i].setVisible(slideAmount>=markers[i].get('value'));
  }
  slidervalue = slideAmount;
  document.getElementById("slidervalue").innerHTML = slidervalue;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top