javascript - 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/

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