Google Map Directionsrenderer Using Polyline Miss Some Routes In Waypoints

I'm using the Google Map API. I want to show the dotted routes in map. If I add polylineDotted object to google.maps.DirectionsRenderer, it will miss some path on the map. Betwe

Solution 1:

polylineDotted should be a PolylineOptions object, not a Polyline.

This:

varpolylineDotted=newgoogle.maps.Polyline({strokeColor:'#9966ff',strokeOpacity:0,fillOpacity:0,icons: [{
        icon:lineSymbol,
        offset:'0',
        repeat:'10px'
    }],})

should be:

varpolylineDotted= {
    strokeColor:'#9966ff',
    strokeOpacity:0,
    fillOpacity:0,
    icons: [{
        icon:lineSymbol,
        offset:'0',
        repeat:'10px'
    }],
};

proof of concept fiddle

code snippet:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var infoWindow = new google.maps.InfoWindow();

functioninitialize() {

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
  };

  var polylineDotted = {
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
  };

  var rendererOptions = {
    map: map,
    suppressMarkers: false,
    polylineOptions: polylineDotted
  };

  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);

  var start = "Lafayette Avenue 212, New York City";
  var end = "Myrtle Avenue 11612, New York City";
  var method = 'DRIVING';
  var request = {
    origin: start,
    waypoints: [{
      location: "Jackie Robinson Pkwy Brooklyn, New York City",
      stopover: true
    }],
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var iwContent = response['routes'][0].legs[0].distance.text + '<br />' + response['routes'][0].legs[0].duration.text;
      infoWindow.setContent(iwContent);
    }
  });

  google.maps.event.addListener(polylineDotted, 'click', function(event) {

    infoWindow.setPosition(event.latLng);
    infoWindow.open(map, this);
  });

  google.maps.event.addListener(map, 'click', function() {

    infoWindow.close();
  });
}

initialize();

#map-canvas {
  height: 400px;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map-canvas"></div>