change the color of the polyline in DirectionsRenderer

Question

i\'ve integrated a map and i want to display the route directions between two locations. everything is working fine and the directions is displayed perfectly , but i want to cha

Answer 1

@Seacat, after you update the directionsRenderer with the new polylineOptions, you have to re-render the directions response which is stored inside the renderer object..

directionsRenderer.setDirections(directionsRenderer.directions);

Answer 2

Using setOptions(options:DirectionsRendererOptions) makes code more readable. The coding would be:

At global level:

var directionsDisplay;

Inside 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 3

At global declarations

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

At initialise

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

Answer 4

In answer marked as resolved I see that object Polyline used for polylineOptions. In my case I use the next code

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

The difference is that I assign polylineOptions, not Polyline object. Not sure it could be helpful, but decided to add these answer.