如何在谷歌地图上显示方向后隐藏其他标记

this google map is to get directions to a location specified by coordinates of the customer as the destination.

To get that from data in the select, i make it a google.maps.LatLng object, and i save the coordinates as a string in the value, then i parse out the latitude and longitude to create the LatLng object.

the steps is :

1-save the coordinates in the option value:

for (var i = 0; i < data.length; i++) {
  displayLocation(data[i]);
  addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
}

2-parse those coordinates and create a google.maps.LatLng object in the directions request:

function calculateRoute() {

  var start = document.getElementById('start').value;
  var destination = document.getElementById('destination').value;
  console.log("selected option value=" + destination);
  var destPt = destination.split(",");
  var destination = new google.maps.LatLng(destPt[0], destPt[1]);
  if (start == '') {
    start = center;
  }
  // ....

(all the above works fine)

-----This is where i am stuck:-----

Even the direction to a specified marker is displayed, the problem is that all markers still in the map, for me I try to make my function display just two things the direction and the marker with the code-client whom I choose, and all other markers will hide.

Here is my Notes about what i add in my code,

**1--***Once I added this function to push all markers in one variable*

    makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {

    for (var i = 0; i < data.length; i++) {

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
        title: data[i].CodeClient,
        map: map
        });

        gmarkers.push(marker);
    }

  });

**2--***and i add this function to hide other markers*

 function toggleMarkers() {
  for (i = 0; i < gmarkers.length; i++) {
    if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
    else gmarkers[i].setMap(map);
  }
}

This problem I have been facing for days and can't seem to resolve , even I've tried looking at a large variety of code blocks here and on the Google Maps API documentation but STILL have not been able to figure out how to hide other markers.

Any suggestions, ideas and help will much appreciated!

this is a screenshot :

----------------------------------------------------------------------------------------------------------------------------------

Here is my code after i updated it

after your advises ,this the update of my code .

it work good , after i click on the button (clear markers) all markers will remove.

Now i wanna know how to make the function toggleMarkers() , remove all markers but it will keep the marker with the code-client whom I choose,

var gmarkers = [];

var map;
var directionsService;
var directionsDisplay;
var geocoder;
var infowindow;

                        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function init() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();
  
                        /*++++++++++++++++++*/
                        
  var mapOptions = {
    zoom: 6,
    center: center = new google.maps.LatLng(32, -6),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

                        /*++++++++++++++++++*/

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions_panel'));

  // Detect user location
  if (navigator.geolocation) {
      
    navigator.geolocation.getCurrentPosition(function(position) {
      var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      geocoder.geocode({
        'latLng': userLocation
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          document.getElementById('start').value = results[0].formatted_address
        }
      });

    }, function() {
      alert('Geolocation is supported, but it failed');
    });
  }
  
                        /*++++++++++++++++++*/

  makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {

    var data = JSON.parse(data.responseText);
    var selectBox = document.getElementById('destination');

    for (var i = 0; i < data.length; i++) {
      displayLocation(data[i]);
      addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
    }

  }); 
  

}

                        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function toggleMarkers() {
  for (i = 0; i < gmarkers.length; i++) {
    if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
    else gmarkers[i].setMap(map);
  }
}   
                        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

function addOption(selectBox, text, value) {
  var option = document.createElement("OPTION");
  option.text = text;
  option.value = value;
  selectBox.options.add(option);
}

                        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

function calculateRoute() {
  var start = document.getElementById('start').value;
  var destination = document.getElementById('destination').value;
  var hakim = document.getElementById('destination');
  console.log("selected option value=" + destination);
  console.log(" value=" + hakim);
  var destPt = destination.split(",");
  var destination = new google.maps.LatLng(destPt[0], destPt[1]);
  if (start == '') {
    start = center;
  }

  var request = {
    origin: start,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  console.log("origin:" + start);
  console.log("dest:" + destination.toUrlValue(12));
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
  alert("???");
  displayLocation(hakim);
}

                        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

function makeRequest(url, callback) {
  var request;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
  }
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      callback(request);
    }
  }
  request.open("GET", url, true);
  request.send();
}

                        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


function displayLocation(rythmstu_innotec) {
  var content = '<div class="infoWindow"><strong> Code Client : ' + rythmstu_innotec.CodeClient + '</strong>' +
    '<br />Latitude : ' + rythmstu_innotec.Latitude +
    '<br />Longitude : ' + rythmstu_innotec.Longitude +
    '<br />Route : ' + rythmstu_innotec.Route +
    '<br />Secteur : ' + rythmstu_innotec.Secteur +
    '<br />Agence : ' + rythmstu_innotec.Agence +
    '<br />prenom de Client : ' + rythmstu_innotec.PrenomClient +
    '<br />Num Adresse : ' + rythmstu_innotec.NumAdresse +
    '<br />GeoAdresse : ' + rythmstu_innotec.GeoAdresse +
    '<br />Téléphone : ' + rythmstu_innotec.Tel +
    '<br />Whatsapp : ' + rythmstu_innotec.Whatsapp +
    '<br />Nbr Frigos : ' + rythmstu_innotec.NbrFrigo +
    '<br />Ouverture Matin : ' + rythmstu_innotec.OpenAm +
    '<br />Fermeture Matin : ' + rythmstu_innotec.CloseAm +
    '<br />Ouverture après-midi : ' + rythmstu_innotec.OpenPm +
    '<br />Fermeture Après-midi : ' + rythmstu_innotec.ClosePm + '</div>';

  if (parseInt(rythmstu_innotec.Latitude) == 0) {
    geocoder.geocode({
      'GeoAdresse': rythmstu_innotec.GeoAdresse
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.rythmstu_innotec,
          title: rythmstu_innotec.name
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(content);
          infowindow.open(map, marker);
        });
      }
    });
  } else {
    var position = new google.maps.LatLng(parseFloat(rythmstu_innotec.Latitude), parseFloat(rythmstu_innotec.Longitude));
    var marker = new google.maps.Marker({
      map: map,
      position: position,
      title: rythmstu_innotec.name
    });
    gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(content);
      infowindow.open(map, marker);
    });
  }
}

body {
  font: normal 14px Verdana;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

#sidebar {
  float: right;
  width: 30%;
}

#main {
  padding-right: 15px;
}

.infoWindow {
  width: 220px;
}

<title>MAP itinéraire </title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="init();">



  <form id="services">
    Location: <input type="text" id="start" value="Midar" /> Destination:
    <select id="destination" onchange="calculateRoute();"></select>
    <input type="button" value="clear map" onclick="toggleMarkers();" />
  </form>

  <section id="sidebar">
    <div id="directions_panel"></div>
  </section>

  <section id="main">
    <div id="map_canvas" style="width: 70%; height: 750px;"></div>
  </section>

</body>

</div>

You never call the toggleMarkers function.

Modified it to be hideMarkers:

function hideMarkers() {
  for (i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }
}

Then call it in the directions service callback function on success:

function calculateRoute() {
  var start = document.getElementById('start').value;
  var destination = document.getElementById('destination').value;
  var hakim = document.getElementById('destination');
  var destPt = destination.split(",");
  var destination = new google.maps.LatLng(destPt[0], destPt[1]);
  if (start == '') {
    start = center;
  }

  var request = {
    origin: start,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      hideMarkers();  // <========================= call it here
    }
  });
  displayLocation(hakim);
}

code snippet:

var gmarkers = [];

var map;
var directionsService;
var directionsDisplay;
var geocoder;
var infowindow;

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function init() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();

  /*++++++++++++++++++*/

  var mapOptions = {
    zoom: 6,
    center: center = new google.maps.LatLng(32, -6),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  /*++++++++++++++++++*/

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions_panel'));

  // Detect user location
  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(position) {
      var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      geocoder.geocode({
        'latLng': userLocation
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          document.getElementById('start').value = results[0].formatted_address
        }
      });

    }, function() {
      alert('Geolocation is supported, but it failed');
    });
  }

  /*++++++++++++++++++*/

  makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {

    var data = JSON.parse(data.responseText);
    var selectBox = document.getElementById('destination');

    for (var i = 0; i < data.length; i++) {
      displayLocation(data[i]);
      addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
    }
  });
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function hideMarkers() {
  console.log("gmarkers.length=" + gmarkers.length);
  for (i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

function addOption(selectBox, text, value) {
  var option = document.createElement("OPTION");
  option.text = text;
  option.value = value;
  selectBox.options.add(option);
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

function calculateRoute() {
  var start = document.getElementById('start').value;
  var destination = document.getElementById('destination').value;
  var hakim = document.getElementById('destination');
  console.log("selected option value=" + destination);
  console.log(" value=" + hakim);
  var destPt = destination.split(",");
  var destination = new google.maps.LatLng(destPt[0], destPt[1]);
  if (start == '') {
    start = center;
  }

  var request = {
    origin: start,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  console.log("origin:" + start);
  console.log("dest:" + destination.toUrlValue(12));
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      hideMarkers();
    }
  });
  displayLocation(hakim);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

function makeRequest(url, callback) {
  var request;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
  }
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      callback(request);
    }
  }
  request.open("GET", url, true);
  request.send();
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


function displayLocation(rythmstu_innotec) {
  var content = '<div class="infoWindow"><strong> Code Client : ' + rythmstu_innotec.CodeClient + '</strong>' +
    '<br />Latitude : ' + rythmstu_innotec.Latitude +
    '<br />Longitude : ' + rythmstu_innotec.Longitude +
    '<br />Route : ' + rythmstu_innotec.Route +
    '<br />Secteur : ' + rythmstu_innotec.Secteur +
    '<br />Agence : ' + rythmstu_innotec.Agence +
    '<br />prenom de Client : ' + rythmstu_innotec.PrenomClient +
    '<br />Num Adresse : ' + rythmstu_innotec.NumAdresse +
    '<br />GeoAdresse : ' + rythmstu_innotec.GeoAdresse +
    '<br />Téléphone : ' + rythmstu_innotec.Tel +
    '<br />Whatsapp : ' + rythmstu_innotec.Whatsapp +
    '<br />Nbr Frigos : ' + rythmstu_innotec.NbrFrigo +
    '<br />Ouverture Matin : ' + rythmstu_innotec.OpenAm +
    '<br />Fermeture Matin : ' + rythmstu_innotec.CloseAm +
    '<br />Ouverture après-midi : ' + rythmstu_innotec.OpenPm +
    '<br />Fermeture Après-midi : ' + rythmstu_innotec.ClosePm + '</div>';

  if (parseInt(rythmstu_innotec.Latitude) == 0) {
    geocoder.geocode({
      'GeoAdresse': rythmstu_innotec.GeoAdresse
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.rythmstu_innotec,
          title: rythmstu_innotec.name
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(content);
          infowindow.open(map, marker);
        });
      }
    });
  } else {
    var position = new google.maps.LatLng(parseFloat(rythmstu_innotec.Latitude), parseFloat(rythmstu_innotec.Longitude));
    var marker = new google.maps.Marker({
      map: map,
      position: position,
      title: rythmstu_innotec.name
    });
    gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(content);
      infowindow.open(map, marker);
    });
  }
}

body {
  font: normal 14px Verdana;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

#sidebar {
  float: right;
  width: 30%;
}

#main {
  padding-right: 15px;
}

.infoWindow {
  width: 220px;
}

<title>MAP itinéraire </title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="init();">

  <form id="services">
    Location: <input type="text" id="start" value="Midar" /> Destination:
    <select id="destination" onchange="calculateRoute();"></select>
    <input type="button" value="clear map" onclick="toggleMarkers();" />
  </form>

  <section id="sidebar">
    <div id="directions_panel"></div>
  </section>

  <section id="main">
    <div id="map_canvas" style="width: 70%; height: 750px;"></div>
  </section>

</body>

</div>

You do not need to use var marker = new google.maps.Marker for the Directions API. They are automatically added there and will also automatically disappear once you request for a new route.

Here is a sample app that renders the directions once the dropdown menu is changed. You can see the Javascript codes that it does not have anything that calls the marker or infowindow object, but they are both present in the map. The marker is automatically added on the origin and destination point. And if you click on those markers, the infowindow automatically appears!

function initMap() {
   var directionsService = new google.maps.DirectionsService();
   var chicago = new google.maps.LatLng(41.85, -87.65);
   var directionsDisplay = new google.maps.DirectionsRenderer();
   var map = new google.maps.Map(document.getElementById('distance-map'), {
      zoom: 5.2,
      center: chicago
   });
   directionsDisplay.setMap(map);

   var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
   };
   document.getElementById('start').addEventListener('change', onChangeHandler);
   document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
   directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      travelMode: 'DRIVING'
   }, function(response, status) {
      if (status === 'OK') {
         directionsDisplay.setDirections(response);
      } else {
         window.alert('Directions request failed due to ' + status);
      }
   });
}

#distance-map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#warnings-panel {
  width: 100%;
  height:10%;
  text-align: center;
}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
   </head>
   <body>
   <br />
      <div id="distance-panel">
         Start:
         <select id="start">
            <option value='41.878114,-87.629798'>Chicago</option>
            <option value='42.331427,-83.045754'>Detroit</option>
            <option value='39.099727,-94.578567'>Kansas City</option>
            <option value='41.600545,-93.609106'>Des Molines</option>
         </select>
         End:
         <select id="end">
            <option value='38.833882,-104.821363'>Colorado Springs</option>
            <option value='36.162664,-86.781602'>Nashville</option>
            <option value='39.768403,-86.158068'>Indianapolis</option>
            <option value='36.162664,-86.781602'>Nashville</option>
         </select>
      </div>
      <br />
      <div id="distance-map"></div>
      <script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLHKWYAEE2PDjvt6BaBH1SIs4Q93PMpQs&callback=initMap">
</script>
   </body>
</html>

You may also check the jsbin version here.

Hope this answered your question.

</div>