Google Maps polyline not displaying correctly after dragging

Question

I am using google maps API, and if I use the default polyline everything is fine even after being dragged. But I want the user to be able to have multiple routes (at which point I want to colour them different colours obviously).

var poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 6
});

If I use a custom polyline to change the colour, it appears correctly at the start, but if you drag the directions to create a new route the polyline cuts off at the marker, and becomes more opaque.

Does anyone know how to prevent the polyline from glitching after dragging for a new direction?

Before being dragged:

(which is correct)

After being dragged(which shows the line is being cut off and more opaque):

For clarification: in both situations the route is still Streator to Baker, and the KM of the route is correct (including the detour after dragging), it's just the line cuts off at the waypoint.

WORKING COPY OF EXACTLY WHAT I MEAN: http://jsfiddle.net/qmsjjbzw/ Hit the submit button then drag the route to see exactly what I mean.

code snippet (from linked fiddle):

// declare map as a global variable
var map;

// use google maps api built-in mechanism to attach dom events
google.maps.event.addDomListener(window, "load", function() {

  // create map
  map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsService = new google.maps.DirectionsService();

});

function submitRoute() {
  orig = "Streator, Il", dest = "Baker, Il";
  //fill out the request
  var request = {
    origin: orig,
    destination: dest,
    provideRouteAlternatives: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  //fill out the directionsservice
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      //render said directions
      renderResponse(response);

    } else alert("Unable to find route between \"" + orig +
      "\" and \"" + dest + "\".");
  });
}

//draws the route on the map and adds draggable listener
function renderResponse(response) {
  var poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 6
  });

  rend = new google.maps.DirectionsRenderer({
    zoom: 4,
    draggable: true,
    map: map,
    directions: response,
    polylineOptions: poly
  });

  rend.addListener('directions_changed', function() {
    //draggable event goes here
  });
}

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>
<button onclick="submitRoute()">Submit</button>

Answer 1

The route is not displayed properly since polylineOptions property of google.maps.DirectionsRenderer expects value to be of PolylineOptions type and not of google.maps.Polyline type, so you could replace:

polylineOptions: poly

with

polylineOptions: {
   strokeColor: '#FF0000',
   strokeOpacity: 0.6,
   strokeWeight: 6,
} 

Modified example

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    map = new google.maps.Map(document.getElementById("map_div"), {
        center: new google.maps.LatLng(33.808678, -117.918921),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    directionsService = new google.maps.DirectionsService();

});

function submitRoute() {
    orig = "Streator, Il", dest = "Baker, Il";
    //fill out the request
    var request = {
        origin: orig,
        destination: dest,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    //fill out the directionsservice
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {

            //render said directions
            renderResponse(response);

        } else alert("Unable to find route between \"" + orig +
		"\" and \"" + dest + "\".");
    });
}

//draws the route on the map and adds draggable listener
function renderResponse(response) {
    var poly = new google.maps.Polyline({
        strokeColor: '#FF0000',
        strokeOpacity: 0.6,
        strokeWeight: 6,
    });
    poly.setDraggable(true);

    rend = new google.maps.DirectionsRenderer({
        zoom: 4,
        draggable: true,
        map: map,
        directions: response,
        //polylineOptions: poly
        polylineOptions: {
            strokeColor: '#FF0000',
            strokeOpacity: 0.6,
            strokeWeight: 6,
        }
    });


    rend.addListener('directions_changed', function (e) {
    });
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<link href="style.css" rel="stylesheet" />
<div id="map_div" style="height: 400px;"></div>
<button onclick="submitRoute()">Submit</button>