title: Show markers on change of slider in google map
body: <p>Map code starts from here.
  I'm working locally now,
  polyline and animation I can adjust later.
  Slider has two variables, so I want marker of the slider range.
   I was trying something with onchange function but I don't know how I can again fetch the downloadurl. </p>
  
  <pre><code>var en = 'http://localhost/path/endI';
  var bus = 'http://localhost/path/mark2';
  var st = 'http://localhost/path/startI';
  var map;
  var infoWindow;
  var markerArray = [];
  function load() {
      if(map == null) {
          map = new google.maps.Map(document.getElementById("map"), {
              center: new google.maps.LatLng(28.43427966, 77.04600334),
              zoom: 17,
              mapTypeId: 'roadmap',
              mapTypeControl: true,
              mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                  position: google.maps.ControlPosition.TOP_CENTER
              },
              zoomControl: true,
              zoomControlOptions: {
                  position: google.maps.ControlPosition.LEFT_CENTER
              },
              scaleControl: true,
              streetViewControl: false,
              fullscreenControl: true,
              fullscreenControlOptions: {
                  position: google.maps.ControlPosition.RIGHT_TOP
              }
  
          });
          infoWindow = new google.maps.InfoWindow ({ maxWidth: 200 });
  
          var trafficLayer = new google.maps.TrafficLayer();
          trafficLayer.setMap(map);
          var images = 'http://localhost/path/office.png';
          var beachMarker = new google.maps.Marker({
              position: {lat: 28.4136, lng:77.0420},
              map: map,
              icon: images
      });
  
      }
         //here i call my xml file which contains lat lang sync time and all 
  
          downloadUrl("http://localhost/path/vehicle.php.xml", function(data) {
          var xml = data.responseXML;
          var markers = xml.documentElement.getElementsByTagName("marker");
          for(var j = 0; j &lt; markerArray.length; j++) {
              markerArray[j].setMap(null);
          }
          markerArray = [];           
  
          for (var i = 0; i &lt; markers.length; i++) {
  
          var point = new google.maps.LatLng(
                          parseFloat(markers[i].getAttribute("lat")),
                          parseFloat(markers[i].getAttribute("lng")));
              var name = markers[i].getAttribute("name");
  
              var sync_time = markers[i].getAttribute("sync_time");
              var loc = markers[i].getAttribute("location");
              var vehicleNum = markers[i].getAttribute("vehicleNo");
              var busIcon = bus + ".png";
              var startIcon = st + ".png";
              var endIcon = en + ".png";
              if(i == 0){
                  var marker = new google.maps.Marker({
                          map: map,
                          position: point,
                          icon: startIcon 
                      });
                      map.panTo(marker.getPosition());  
              markerArray.push(marker);
  
              var html = '&lt;h1 style="color:green; font-weight:bold; text-align:center;"&gt;Trip Started From Here&lt;/h1&gt;&lt;br&gt;'+'&lt;div style="height:90px;"&gt;' + '&lt;b&gt;Route ' + name + '&lt;/b&gt;&lt;br /&gt;&lt;b&gt;Bus Number&lt;/b&gt;: ' + vehicleNum + '&lt;br /&gt;&lt;b&gt;Location&lt;/b&gt;: ' + loc + '&lt;br /&gt;&lt;b&gt;Start Time&lt;/b&gt;: ' + sync_time + '&lt;/div&gt;';
              bindInfoWindow(marker, map, infoWindow, html);
              }
              if(i == markers.length-1){
                  var marker = new google.maps.Marker({
                          map: map,
                          position: point,
                          icon: endIcon 
                      });
                      map.panTo(marker.getPosition());  
                      markerArray.push(marker);
  
              var html = '&lt;h1 style="color:red; font-weight:bold;text-align:center;"&gt;Trip Ends Here&lt;/h1&gt;&lt;br&gt;'+'&lt;div style="height:90px;"&gt;' + '&lt;b&gt;Route ' + name + '&lt;/b&gt;&lt;br /&gt;&lt;b&gt;Bus Number&lt;/b&gt;: ' + vehicleNum + '&lt;br /&gt;&lt;b&gt;Location&lt;/b&gt;: ' + loc + '&lt;br /&gt;&lt;b&gt;End Time&lt;/b&gt;: ' + sync_time + '&lt;/div&gt;';
              bindInfoWindow(marker, map, infoWindow, html);
              }
              var marker = new google.maps.Marker({
                          map: map,
                          position: point,
                          icon: busIcon 
                      });
              map.panTo(marker.getPosition());  
              markerArray.push(marker);
  
              var html = '&lt;div style="height:90px;"&gt;' + '&lt;b&gt;Route ' + name + '&lt;/b&gt;&lt;br /&gt;&lt;b&gt;Bus Number&lt;/b&gt;: ' + vehicleNum + '&lt;br /&gt;&lt;b&gt;Location&lt;/b&gt;: ' + loc + '&lt;br /&gt;&lt;b&gt;Sync Time&lt;/b&gt;: ' + sync_time + '&lt;/div&gt;';
              bindInfoWindow(marker, map, infoWindow, html);
  
              if(i&gt;1){
                  var iconsetngs = {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };
                  var latlng1 = marker.getPosition();
                  var latlng2 = markerArray[i-1].getPosition();
                  var flightPlanCoordinates = [ latlng1,latlng2];
                  var flightPath = new google.maps.Polyline({
                      path: flightPlanCoordinates,
                      strokeColor:'#dc143c',
      strokeOpacity: 0.8,
      strokeWeight: 1,
      animation: google.maps.Animation.DROP,
      map: map,
      icons: [{
          icon: iconsetngs,
          repeat:'290px',
          offset: '100%'}]
                  });
          flightPath.setMap(map);
  
      var flightPathShadow = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: 'black',
      strokeOpacity: 0.1,
      strokeWeight: 8
    });
          flightPathShadow.setMap(map);
  }
  }
  });
  }
        function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
      });
  }
  
  function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
                  new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
  
      request.onreadystatechange = function() {
          if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
          }
      };
  
      request.open('GET', url, true);
      request.timeout = 10000;
      request.send(null);
  }
  
  function doNothing() {}
  
   &lt;script src='https://code.jquery.com/jquery-1.12.4.js'&gt;&lt;/script&gt;
   &lt;script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'&gt;&lt;/script&gt;
  
     slider have two variable , so i want marker of the slider range
     i was trying somthing with onchnage function but i dont know how i can again fetch the downloadurl 
  
  $("#slider-range").slider({
  range: true,
  min: 0,
  max: 1440,
  step: 15,
  values: [0, 1440],
  slide: function (e, ui) {
  var hours1 = Math.floor(ui.values[0] / 60);
      var minutes1 = ui.values[0] - (hours1 * 60);
      if (hours1.length == 1) hours1 = '0' + hours1;
      if (minutes1.length == 1) minutes1 = '0' + minutes1;
      if (minutes1 == 0) minutes1 = '00';
      if (hours1 &gt;= 12) {
          if (hours1 == 12) {
              hours1 = hours1;
              minutes1 = minutes1 + " PM";
          } else {
              hours1 = hours1 - 12;
              minutes1 = minutes1 + " PM";
          }
      } else {
          hours1 = hours1;
          minutes1 = minutes1 + " AM";
      }
      if (hours1 == 0) {
          hours1 = 12;
          minutes1 = minutes1;
      }
      } 
      $('.slider-time').html(hours1 + ':' + minutes1);
  
       var hours2 = Math.floor(ui.values[1] / 60);
       var minutes2 = ui.values[1] - (hours2 * 60);
  
       if (hours2.length == 1) hours2 = '0' + hours2;
       if (minutes2.length == 1) minutes2 = '0' + minutes2;
       if (minutes2 == 0) minutes2 = '00';
       if (hours2 &gt;= 12) {
          if (hours2 == 12) {
              hours2 = hours2;
              minutes2 = minutes2 + " PM";
          } else if (hours2 == 24) {
              hours2 = 11;
              minutes2 = "59 PM";
          } else {
              hours2 = hours2 - 12;
              minutes2 = minutes2 + " PM";
          }
       } else {
          hours2 = hours2;
          minutes2 = minutes2 + " AM";
       }
  
        $('.slider-time2').html(hours2 + ':' + minutes2);
    }
   });
  </code></pre>
  
  <p>All I want as I move my slider it gets value of markers and show the                   markers my xml file contains sync time. This is my xml file.
   Its not actually like this, its formatted   but these are the   attributes.
  The slider function gets xml file sync time so with this sync time and slider time it shows correct markers or path on google map.</p>
  
  <pre><code>    [lat="28.41381473" lng="77.04298833" name="01" location=""   sync_time="2016-10-12 15:58:05" vehicleNo="Abhishek"]
  </code></pre>
  
  <p>Please help me out.</p>