google map api polygon re-color

Question

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 same function it will change but after that, it wont, even tho variable reference does exist.

Here is fiddle demo:

http://jsfiddle.net/8xq4gd8y/15/

code

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

had a similar question yesterday, maybe it helps http://stackoverflow.com/questions/35597394/how-to-change-color-of-route-in-google-map-api-after-route-is-build/35598708#35598708 — el solo lobo, Feb 25 '16 at 08:09
You should avoid opening multiple questions for the same issue. The solution I gave you on your previous question works but the solution proposed below by @geocodezip is even easier! — MrUpsidown, Feb 25 '16 at 08:56
Sorry, but previous question did not solve the issue. it only made it more complicated. So I re-posted to make it simple and I was deleting previous, it wont let me. but sorry for any inconvenience — Basit, Feb 25 '16 at 09:37

score 3 · Accepted Answer · answered Feb 25 '16 at 08:29

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;

function renderDirections(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 17

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

function calculateAndDisplayRoute(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);
    }
  });
}

function initialize() {
  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
}

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

Always learning from you ;) That's even easier than the solution I gave on his previous question. Cheers! — MrUpsidown, Feb 25 '16 at 08:55
@geocodezip I have been setting routeIndex and many different things, but nothing solved it lol... Your answer solved it :)... thank you. — Basit, Feb 25 '16 at 09:33

google map api polygon re-color

1 Answers1

Linked