Change polyline color in DirectionsRenderer

Question

I turned on the map, and I want to display the routes between two points. everything works fine, and the directions are displayed fine, but I want to change the color of the Polyline direction, I tried this code, as the documentation says:

 //polyline options var pOptions = { map: map, strokeColor: "#2249a3", strokeOpacity: 0.9 , strokeWeight: 12, z-index: 99 }; logJava(polylineOptions); //directionsRenderer options var mDirectionsRendererOptions = { map: map, suppressMarkers: true, suppressInfoWindows: true, polylineOptions: pOptions }; logJava(mDirectionsRendererOptions); directionsDisplay = new google.maps.DirectionsRenderer(mDirectionsRendererOptions); 

but when I add this code, it stops the map and it doesn’t display anything, when I comment on it, everything works fine.

what is wrong with this code and how to change the color of a polyline using google maps javascript api v3 ?

Thanks in advance,

Answer 1

With global declarations

 var polylineOptionsActual = new google.maps.Polyline({ strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 10 }); 

Upon initialization

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

Answer 2

In the answer marked as allowed, I see that the Polyline object is used for polylineOptions. In my case, I use the following code

 new google.maps.DirectionsRenderer({ suppressMarkers: true, polylineOptions: { strokeColor: '#5cb85c' } }); 

The difference is that I am assigning a polylineOptions , not a Polyline object . Not sure if this might be useful, but decided to add this answer.

Answer 3

Using setOptions (options: DirectionsRendererOptions) makes the code more readable. Encoding will be:

At the global level:

 var directionsDisplay; 

Inside the initialize() method:

 var polyline = new google.maps.Polyline({ strokeColor: '#C00', strokeOpacity: 0.7, strokeWeight: 5 }); directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setOptions({polylineOptions: polyline}); now directionDisplay can be used in any method with the custom poly line. 

Answer 4

@Seacat, after you update the directionRenderer with the new polylineOptions parameters, you need to redisplay the response to the requests, which is stored inside the rendering object.

 directionsRenderer.setDirections(directionsRenderer.directions);