title: How do you change the color of the dotted line on returned Google map directions
body: <p>Using Google directions service I'm getting transit results between two locations and displaying the result on the map. I want to change the color of the line color between the two locations. I'm using google.maps.Polyline to change the main line color but there are sections where the line is dotted (to show where you have to walk) but that doesn't change to the same color that the main line is. What can I do to change the dotted lines color?</p>
  
  <pre class="lang-js prettyprint-override"><code>/* change line color */
  var polylineOptionsActual = new google.maps.Polyline({
    strokeColor: '#9f98ff',
    strokeWeight: 5
  });
  
  function initialize() {
    /* create map */
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
    /* directions */
    var rendererOptions = { 
      map: map, 
      suppressMarkers: true,
      polylineOptions: polylineOptionsActual
    } 
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setPanel(document.getElementById('directions-results'));
  }
  
  function getDirections() {
    /* directions request */
    var request = {
      origin: document.getElementById('from-input').value,
      destination: document.getElementById('to-input').value,
      travelMode: google.maps.TravelMode.TRANSIT
    };
  
    /* display directions */
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
  </code></pre>