Google Maps JS - Render only one leg from a route

Question

I'm developing a JS webapp with Google Maps API.

I have to calculate the distance from A/D to B, B to C and C to A/D (please check the next image).

https://i.stack.imgur.com/FkaK9.jpg

But, on the map, I have to render ONLY the second leg (legs[1], B to C). (check the image for more info)

https://i.stack.imgur.com/8j6WF.jpg

What can I do to hide the first and last leg of my route? Of course, I could do another request, one for the map, one for the calculations, but I'm trying to be as efficient as possible.

My JS:

 var mpos = "via Melzi deril 38 20154 Milano";
  var madd = $("#i_madd_v").val() + ', ' + $("#i_madd_n").val() + ', ' + $("#i_madd_c").val();
  var dadd = $("#i_dadd_v").val() + ', ' + $("#i_dadd_n").val() + ', ' + $("#i_dadd_c").val();

  console.log(madd);
  console.log(dadd);

  function initMap() {
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();

    var centro = new google.maps.LatLng(45.462861, 9.186453);
    var mapOptions = {
      zoom:11,
      center: centro,
      disableDefaultUI: true
    }
    map = new google.maps.Map(document.getElementById('mappa'), mapOptions);
    directionsRenderer.setMap(map);
    calcRoute(directionsService, directionsRenderer);
  }
  
  function calcRoute(directionsService, directionsRenderer) {

    var request = {
      origin:mpos,
      destination:mpos,
      waypoints: [
        { 
          location: madd,
          stopover: true
        },
        { 
          location: dadd,
          stopover: true
        },
      ],
      travelMode: 'DRIVING'
    };
    directionsService.route(request, function(response, status) {
      if (status == 'OK') {
        console.log(response);
        console.log(status);
        
        directionsRenderer.setDirections(response);
      }
    });
  }
  initMap();
});

There is a syntax error in the posted code (extra `});` at the end). Please provide a [mcve] that demonstrates your issue, preferably a [StackSnippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers), with default values to display the route. — geocodezip, Oct 03 '20 at 22:47

score 0 · Accepted Answer · answered Oct 03 '20 at 22:57

If your route will always have 3 legs, and you always want to remove the 1st and last, you can modify the response from the directions service before passing it to the directions renderer:


directionsService.route(request, function(response, status) {
  if (status == 'OK') {
    response.routes[0].legs.splice(0,1); // remove 1st leg
    response.routes[0].legs.splice(1,1); // remove last leg
    directionsRenderer.setDirections(response);
  } else alert("directions request failed:"+status);
});

proof of concept fiddle

code snippet:

var mpos = "via Melzi deril 38 20154 Milano";
var madd = "Monza, IT";
var dadd = "Segrate, IT";

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();

  var centro = new google.maps.LatLng(45.462861, 9.186453);
  var mapOptions = {
    zoom: 11,
    center: centro,
    disableDefaultUI: true
  }
  map = new google.maps.Map(document.getElementById('mappa'), mapOptions);
  directionsRenderer.setMap(map);
  calcRoute(directionsService, directionsRenderer);
}

function calcRoute(directionsService, directionsRenderer) {

  var request = {
    origin: mpos,
    destination: mpos,
    waypoints: [{
        location: madd,
        stopover: true
      },
      {
        location: dadd,
        stopover: true
      },
    ],
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      response.routes[0].legs.splice(0, 1);
      response.routes[0].legs.splice(1, 1);
      directionsRenderer.setDirections(response);
    }
  });
}
initMap();

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#mappa {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=&v=weekly"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="mappa"></div>
</body>

</html>

Google Maps JS - Render only one leg from a route

1 Answers1