CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Sean Liu
Sean Liu

Reputation: 1783

Use directions service of Google Maps API to show blue line for all routes

function placeDistanceMarkers(
 coordinates,
 in_between_distance,
 unit,
 departure_time
) {
 if (coordinates.length < 2) {
   throw new Error("Invalid length of marker coordinates");
 }

 // the elements are the functions to be called with lat() and lng()
 let start_coord = coordinates[0],
   end_coord = coordinates[coordinates.length - 1];
 let distances = [];
 distances.push(0); // init
 let marker_index = 0;

 // start marker
 addMarker(
   new google.maps.LatLng(start_coord.lat(), start_coord.lng()),
   { lat: start_coord.lat(), lng: start_coord.lng() },
   ++marker_index,
   departure_time
 );
 //end marker
 addMarker(
   new google.maps.LatLng(end_coord.lat(), end_coord.lng()),
   { lat: end_coord.lat(), lng: end_coord.lng() },
   ++marker_index,
   departure_time
 );

 // calculate distances with the starting coord coordinates[0]
 for (let i = 1; i < coordinates.length; i++) {
   let d = distance(
     { lat: start_coord.lat(), lng: start_coord.lng() },
     { lat: coordinates[i].lat(), lng: coordinates[i].lng() },
     "miles"
   );
   distances.push(d);
 }

 let start_distance = 0;
 for (let i = 0; i < coordinates.length; i++) {
   if (distances[i] - start_distance >= 20) {
     start_distance = distances[i];
     addMarker(
       new google.maps.LatLng(coordinates[i].lat(), coordinates[i].lng()),
       { lat: coordinates[i].lat(), lng: coordinates[i].lng() },
       ++marker_index,
       departure_time
     );
   }
 }
}
function displayRoute2(start, end, departure_time) {
 directionsService = new google.maps.DirectionsService();
 var request = {
   origin: start,
   destination: end,
   travelMode: "DRIVING",
   provideRouteAlternatives: true,
 };
 directionsService.route(request, function (result, status) {
   if (status == "OK") {
     console.log(result);
     try {
       //the directions result which contains multiple routes
       directionsResult = result;
       let n = directionsResult.routes.length;
       //by default , the map displays the first result directions
       directionsDisplay = new google.maps.DirectionsRenderer();
       directionsDisplay.setDirections(result);
       directionsDisplay.setMap(map);
       // place markers 
       for (let i = 0; i < n; i++) {
         placeDistanceMarkers(
           [
             result.routes[0].legs[0].start_location,
             ...result["routes"][i]["overview_path"],
             result.routes[0].legs[0].end_location,
           ],
           20,
           "miles",
           departure_time
         );
       }
       fillRouteOptions();
     } catch (e) {
       console.log(e.toString());
     }
   }
 });
}

Here is current map I display: enter image description here

I use above two functions to create map below. Right now it only displays the blue line for route 0, I would like to have blue line for all the routes. I am trying to use directionsDisplay.setRouteIndex(i); in the for loop, but this will only display blue line for the last route. Thanks for any help!

Upvotes: 0

Views: 270

Answers (1)

Shawn Domingo
Shawn Domingo

Reputation: 1401

You will need to use more than 1 DirectionsRenderer depending on how many paths you'll need to show. Here's a sample I created which has 2 DirectionsRenderer : https://jsbin.com/nezodemiro/1/edit?html,output

Sample code is here:

Should be something like:

//instatiating renderers
directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay2 = new google.maps.DirectionsRenderer;


//all the other processes here...

//displaying the paths
directionsDisplay.setMap(map);
directionsDisplay2.setMap(map);

Please note that you can do this more efficiently (e.g. creating loops in creating and showing multiple renderers, but basically that's how you will be able to show the paths). Hope this helps.

EDIT: You will need to add an API key to the sample I shared to have it working.

Upvotes: 1

Related Questions