google-maps google-maps-api-3 google-polyline

How to show polyline in the order of waypoints in google maps?

I want to show polyline in the order of waypoints. Consider I want to travel from A(source) to C(destination) through B(mid point), then the polyline should also be shown in the same order. But my code not working correctly. The polyline should be drawn in the order of A, B, and C.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBkDLA8MD77ueEwwxMgxadTBtzjgU0fJE0"></script>
<script>
 // The below code shows polyline incorrectly

var map;
var wyPts = [];

function addWayPoints(location) {
    wyPts.push({
        location: location,
        stopover: true
    });
}

function createInfoWindowContent(latLng, contentStr) {
    var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
    return content;
}

function displayRoute(origin, destination, service, display) {
    service.route({
            origin: origin,
            destination: destination,
            waypoints: wyPts,
            optimizeWaypoints: false,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        },
        function (response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                display.setDirections(response);
            }
            else {
                alert('Could not display directions due to: ' + status);
            }
        }
    );
}

function initMap() {
    var src = new google.maps.LatLng(17.45165, 78.3942433);
    var midPt1 = new google.maps.LatLng(17.4510881, 78.3932577);
    addWayPoints(midPt1);

    var destination = new google.maps.LatLng(17.4517866, 78.3927456);

    map = new google.maps.Map(document.getElementById('map'), {
    center: src,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT,
        mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.TERRAIN,
        google.maps.MapTypeId.HYBRID]
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    },
    zoom: 14
});

/*var coordInfoWindowSrc = new google.maps.InfoWindow({
    content: createInfoWindowContent(src, "Source"),
    maxWidth: 180
});
coordInfoWindowSrc.setPosition(src);
coordInfoWindowSrc.open(map);

var coordInfoWindowDest = new google.maps.InfoWindow({
    content: createInfoWindowContent(destination, "Destination"),
    maxWidth: 180
});
coordInfoWindowDest.setPosition(destination);
coordInfoWindowDest.open(map);*/


var polylineProps = {
    strokeColor: '#009933',
    strokeOpacity: 1.0,
    strokeWeight: 3

};


var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false, 
    map: map,
    suppressMarkers: false,
    polylineOptions: polylineProps
});

var directionsService = new google.maps.DirectionsService();

displayRoute(src, destination, directionsService, directionsDisplay);

directionsDisplay.addListener(
    'change',

function () {
    displayRoute(src, destination, directionsService,
    directionsDisplay);
});


}
google.maps.event.addDomListener(window, 'load', initMap);
</script>


<html>
    <div id="map" style="width:100%; height:90vh;">
        <div id="map-canvas" style="width:100%; height:100%;"></div>
        <div id="crosshair"></div>
    </div>
</html>

Solution

Your code is doing exactly what you are coding it to do. The route goes from the source (S) to the midpoint (M) then (backtracks) to the destination (D, which is between the start and midpoints). You just can't see the overlap of the route because it overlays the original route. Look at the description of the route in the directions "panel".

proof of concept fiddle

code snippet:

var map;
var wyPts = [];

function addWayPoints(location) {
  wyPts.push({
    location: location,
    stopover: true
  });
}

function createInfoWindowContent(latLng, contentStr) {
  var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
  return content;
}

function displayRoute(origin, destination, service, display) {
  service.route({
      origin: origin,
      destination: destination,
      waypoints: wyPts,
      optimizeWaypoints: false,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    },
    function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        display.setDirections(response);
      } else {
        alert('Could not display directions due to: ' + status);
      }
    }
  );
}

function initMap() {
  var src = new google.maps.LatLng(17.45165, 78.3942433);
  var midPt1 = new google.maps.LatLng(17.4510881, 78.3932577);
  addWayPoints(midPt1);

  var destination = new google.maps.LatLng(17.4517866, 78.3927456);

  map = new google.maps.Map(document.getElementById('map'), {
    center: src,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_RIGHT,
      mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.TERRAIN,
        google.maps.MapTypeId.HYBRID
      ]
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    zoom: 14
  });
  var markerS = new google.maps.Marker({
    map: map,
    position: src,
    title: "Source",
    label: "S"
  });
  var markerD = new google.maps.Marker({
    map: map,
    position: destination,
    title: "Dest",
    label: "D"
  });
  var markerM = new google.maps.Marker({
    map: map,
    position: midPt1,
    title: "Mid",
    label: "M"
  });

  var polylineProps = {
    strokeColor: '#009933',
    strokeOpacity: 1.0,
    strokeWeight: 3
  };

  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false,
    map: map,
    suppressMarkers: true,
    polylineOptions: polylineProps
  });
  directionsDisplay.setPanel(document.getElementById("panel"));

  var directionsService = new google.maps.DirectionsService();

  displayRoute(src, destination, directionsService, directionsDisplay);

  directionsDisplay.addListener(
    'change',

    function() {
      displayRoute(src, destination, directionsService,
        directionsDisplay);
    });
}
google.maps.event.addDomListener(window, 'load', initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width:100%; height:90vh;"></div>
<div id="panel">
</div>