giving color of path in google directions api

Question

https://developers.google.com/maps/documentation/javascript/directions

here is my code to show path

function calcRoute() {
  var request = {
          origin: "Chicago, IL",
          destination: "Los Angeles, CA",
          waypoints: [
            {
              location:"Joplin, MO",
              stopover:false
            },{
              location:"Oklahoma City, OK",
              stopover:true
            }],
          provideRouteAlternatives: false,
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.IMPERIAL
        };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

How to change the path color the default is blue?

Answer 1

You can find this in the API Reference

The DirectionsRendererOptions object takes a polylineOptions property where you can define its style.

For example:

var directionsOptions = {
    polylineOptions: {
        strokeColor: 'red'
    }
}

directionsDisplay = new google.maps.DirectionsRenderer(directionsOptions);

Hope this helps!

Answer 2

When you add a polyline to a Map you can simply use a PolylineOptions object, calling the width() and color() methods on it:

    private GoogleMap map;

    //get the map reference from the layout

    //Set the polyline configurations
    PolylineOptions rectLine = new PolylineOptions().width(8).color(Color.RED);

    //add the points to the polyline
    rectLine.add(new LatLng(40.3, 18.6));
    rectLine.add(new LatLng(40.3, 20));

    //add the polyline to the map
    map.addPolyline(rectLine);