Infowindow works only for 1 route, it is not working for other 3 routes in google map

Question

I have total 5 locations in google map, i have set marker for that and added route path between markers, between this path i have added infowindow, but it is working for only 1 route, not working for other 3 route, can anyone please help me why it is not working for other 3 routes, also after closing that infowindow i am not able to open that infowindow, can we set somepoint between route, and on click open infowindow, can anyone please help me to resolve this issue ?

var geocoder;
            var map;
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var locations = [
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Maroubra Beach', -33.950198, 151.259302, 1],
                ['Cronulla Beach', -34.028249, 151.157507, 3]
            ];
	    var infowindow;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();


                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: new google.maps.LatLng(-33.92, 151.25),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                directionsDisplay.setMap(map);
                var infowindow = new google.maps.InfoWindow();

                var marker, i;
                var request = {
                    travelMode: google.maps.TravelMode.DRIVING
                };
                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

                    if (i == 0)
                        request.origin = marker.getPosition();
                    else if (i == locations.length - 1)
                        request.destination = marker.getPosition();
                    else {
                        if (!request.waypoints)
                            request.waypoints = [];
                        request.waypoints.push({
                            location: marker.getPosition(),
                            stopover: true
                        });
                    }

                }
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        var route = response.routes[0];
                        var summaryPanel = document.getElementById("directions_panel");
                        summaryPanel.innerHTML = "";
                        // For each route, display summary information.
                        for (var i = 0; i < route.legs.length; i++) {
                            var routeSegment = i + 1;
                            summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                            summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                            summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
                            summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
			    /*********** INFOWINDOW *****************/
			    var center = response.routes[0].overview_path[Math.floor(response.routes[0].overview_path.length / 2)];
			    infowindow.setPosition(center);
			    infowindow.setContent(response.routes[0].legs[i].duration.text + "<br>" + response.routes[0].legs[i].distance.text);
			    infowindow.open(directionsDisplay.map);
                        }
			
                        computeTotalDistance(response);
                    } else {
                        alert("directions response " + status);
                    }
                });
            }
	    function computeTotalDistance(result) {
                var totalDist = 0;
                var totalTime = 0;
                var myroute = result.routes[0];
                for (i = 0; i < myroute.legs.length; i++) {
                    totalDist += myroute.legs[i].distance.value;
                    totalTime += myroute.legs[i].duration.value;
                }
                totalDist = totalDist / 1000.
                document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
            }
            google.maps.event.addDomListener(window, "load", initialize);

<head> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
	<title>Google Maps Multiple Markers</title> 
	<script src="http://maps.google.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&libraries=places"></script>
    </head> 
    
    
    <div id="map" style="float:left;width: 500px; height: 400px;"></div>
	<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
	    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
	    <div id="total"></div>
	</div>

Answer 1

Issues:

1. you need to create an InfoWindow for each leg of the route to display that leg's distance and duration.
2. you need to calculate the "center" of each leg to set the location for that infowindow.

  for (var i = 0; i < route.legs.length; i++) {
    var routeSegment = i + 1;
    summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
    summaryPanel.innerHTML += route.legs[i].start_address + " to ";
    summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
    summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
    /*********** INFOWINDOW *****************/
    var legs = route.legs;
    var steps = legs[i].steps;
    var stepPath = [];
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      for (k = 0; k < nextSegment.length; k++) {
        stepPath.push(nextSegment[k]);
      }
    }
    var center = stepPath[Math.floor(stepPath.length / 2)];
    var stepIW = new google.maps.InfoWindow();
    stepIW.setPosition(center);
    stepIW.setContent(response.routes[0].legs[i].duration.text + "<br>" + response.routes[0].legs[i].distance.text);
    stepIW.open(directionsDisplay.map);
  }

proof of concept fiddle

code snippet:

var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = [
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Maroubra Beach', -33.950198, 151.259302, 1],
  ['Cronulla Beach', -34.028249, 151.157507, 3]
];
var infowindow;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

    if (i == 0)
      request.origin = marker.getPosition();
    else if (i == locations.length - 1)
      request.destination = marker.getPosition();
    else {
      if (!request.waypoints)
        request.waypoints = [];
      request.waypoints.push({
        location: marker.getPosition(),
        stopover: true
      });
    }

  }
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById("directions_panel");
      summaryPanel.innerHTML = "";
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
        /*********** INFOWINDOW *****************/
        var legs = route.legs;
        var steps = legs[i].steps;
        var stepPath = [];
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            stepPath.push(nextSegment[k]);
          }
        }
        var center = stepPath[Math.floor(stepPath.length / 2)];
        var stepIW = new google.maps.InfoWindow();
        stepIW.setPosition(center);
        stepIW.setContent(response.routes[0].legs[i].duration.text + "<br>" + response.routes[0].legs[i].distance.text);
        stepIW.open(directionsDisplay.map);
      }
        computeTotalDistance(response);
    } else {
      alert("directions response " + status);
    }
  });
}

function computeTotalDistance(result) {
  var totalDist = 0;
  var totalTime = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
    totalDist += myroute.legs[i].distance.value;
    totalTime += myroute.legs[i].duration.value;
  }
  totalDist = totalDist / 1000.
  document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
}
google.maps.event.addDomListener(window, "load", initialize);
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
      }
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      })
    }
  }

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
  <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
  <div id="total"></div>
</div>