Google Map Api Polygon Re-color

I want to change polygon color after it is already set. but on user event. Once the route colors are set, it is not changing afterwards, which does not make since, because inside s

Solution 1:

Looks like you need to set the map property of the DirectionsRenderer to get it to change:

setTimeout (function () {
  console.log('run');
  console.log(directionsRenderer2); // < exist in console log
  directionsRenderer2.setOptions({
    polylineOptions: {
      strokeColor: 'gray'
    },
    map:map
  });
},1000);

updated fiddle

code snippet:

var map;

functionrenderDirections(result, map) {
  var directionsRenderer1 = new google.maps.DirectionsRenderer({
    directions: result,
    routeIndex: 3,
    map: map,
    polylineOptions: {
      strokeColor: "red"
    }
  });
  console.log("routeindex1 = ", directionsRenderer1.getRouteIndex());

  var directionsRenderer2 = new google.maps.DirectionsRenderer({
    directions: result,
    routeIndex: 1,
    map: map,
    polylineOptions: {
      strokeColor: "blue"
    }
  });
  console.log("routeindex2 = ", directionsRenderer2.getRouteIndex()); //line 17setTimeout(function() {
    console.log('run');
    console.log(directionsRenderer2); // < exist in console log
    directionsRenderer2.setOptions({
      polylineOptions: {
        strokeColor: 'gray'
      },
      map: map
    });
  }, 1000);
}

functioncalculateAndDisplayRoute(origin, destination, directionsService, directionsDisplay, map) {
  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives: true
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      renderDirections(response, map);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

functioninitialize() {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(new google.maps.LatLng(51.61793418642200, -0.13678550737318), new google.maps.LatLng(51.15788846699750, -0.16364536053269), directionsService, directionsDisplay, map);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map_canvas"></div>