how to change color of route in google map api after route is build

Question

You will find many already answers showing how to build route with different colors on it how to change the color of route in google maps v3

I want to know how I can change the color once its already builded and rendered.

I have many different routes showing on the map, but I want to show red color or darker color, if this direction point is active and change other route colors to gray, until one of them are active.

code:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeColor: "red"
    }
  });

  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {lat: 41.850033, lng: -87.6500523}
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

demo to show how its not working with two routes: http://jsfiddle.net/8xq4gd8y/15/

Aporia

Answer 1

The directionsRenderer class has a setOptions method. See the documentation.

directionsDisplay.setOptions({
  polylineOptions: {
    strokeColor: 'red'
  }
});

For this to work, you need to remove it from the map and add it back to see the color change.

For example in an event listener, you would do:

google.maps.event.addListener(map, 'click', function() {

  directionsDisplay.setMap(null);

  directionsDisplay.setOptions({
    polylineOptions: {
      strokeColor: 'blue'
    }
  });

  directionsDisplay.setMap(map);
});

JSFiddle demo

Snap

I have used above example to change the color... but it changes color for all the routes and not just for single.. I wanted to make old routes gray and active route red, but when I set others gray and current one active.. it changes all to active. – Aporia

How can we possibly know that and help you with it without seeing that part of your code? – Snap

here is shorter and cleaner version example. if I setOption inside setTimeout, it will run and will have route object, but does not re-color. – Aporia

Read my answer again... you didn't do it right. For this to work, you need to remove it from the map and add it back to see the color change. that is setMap(null) and setMap(map) once you have set the new color. – Snap

Thank you for your help. – Aporia

I get this error, InvalidValueError: unknown property polylineOptions – Moccasin