5

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/

Community
  • 1
  • 1
Basit
  • 16,316
  • 31
  • 93
  • 154

1 Answers1

9

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

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
  • 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. – Basit Feb 24 '16 at 13:20
  • 1
    How can we possibly know that and help you with it without seeing that part of your code? – MrUpsidown Feb 24 '16 at 13:25
  • 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. – Basit Feb 24 '16 at 17:56
  • 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. – MrUpsidown Feb 25 '16 at 08:32
  • 1
    Thank you for your help. – Basit Feb 25 '16 at 09:35
  • I get this error, InvalidValueError: unknown property polylineOptions – Siddharth Jul 30 '18 at 18:40