How do you change the color of the dotted line on Google map v3 directions

Question

I am working on Transit directions and have been able to change the color of polyline displayed for transit route using polylineOptions property.

However, I am not a

Answer 1

The options for these lines are fixed and will not be affected by the polylineOptions of the DirectionsRenderer.

The polylineOptions for these dotted lines will (currently) be set by the API to:

{
  "icons": [{
    "icon": {
      "path": 0,
      "scale": 3,
      "fillOpacity": 0.7,
      "fillColor": "#00b3fd",
      "strokeOpacity": 0.8,
      "strokeColor": "#3379c3",
      "strokeWeight": 1
    },
    "repeat": "10px"
  }],
  "strokeColor": "#000000",
  "strokeOpacity": 0,
  "strokeWeight": 5
}

...any custom polylineOption of the DirectionsRenderer will be ignored.

A possible workaround(but it will only be possible to set a single fixed value for all these dotted lines):

function initMap() {
     var  goo = google.maps,
          map = new goo.Map(document.getElementById('map'), {
                  zoom: 7,
                  center: {lat: 41.85, lng: -87.65}
                }),
          directionsService       = new goo.DirectionsService,
          directionsDisplay       = new goo.DirectionsRenderer({
                                      map:map,
                                      polylineOptions:{
                                        strokeColor:'red'
                                      }});
      google.maps.Polyline.prototype.setMap=(function(f,r){
      
        return function(map){
          if(
            this.get('icons')
              &&
            this.get('icons').length===1
              &&
            this.get('strokeOpacity')===0
              &&
            !this.get('noRoute')
          ){
            if(r.get('polylineOptions')&& r.get('polylineOptions').strokeColor){
              
              var icons=this.get('icons'),
                  color=r.get('polylineOptions').strokeColor;
              icons[0].icon.fillOpacity=1;
              icons[0].icon.fillColor=color;
              icons[0].icon.strokeColor=color;
              this.set('icons',icons);
          }}
        f.apply(this,arguments);
      }
      
     })(
          google.maps.Polyline.prototype.setMap,
          directionsDisplay);
    
  
  directionsService.route({
    origin: new google.maps.LatLng(52.549917, 13.42539669),
    destination: new google.maps.LatLng(52.541843, 13.4206566),
    travelMode: google.maps.TravelMode.TRANSIT
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

html, body,#map  {
        height: 100%;
        margin: 0;
        padding: 0;
      }

It overrides the setMap-method of google.maps.Polyline

It checks if

1. the strokeOpacity is 0
2. a IconSequence with a single icon is present
3. it doesn't have a noRoute-property(in the case that you draw polylines on your own which match the first 2 condition set a noRoute-option to true, otherwise they will be affected too)

When all 3 conditions are true, it will modify the icons-property of the polyline.