I have created routes in map, but when click on any route infowindow not showing

Question

i have draw routes from Point A to Point B. I am not able to show route information on routes same as appears in google-map.

i need to make it look alike as google map.

and when user click on any route, same route should show selected.

Following are the code.

function calculateRoutes(pierLocation, destinationLocation) {
  var request = {
    origin: document.getElementById("from").value,
    destination: document.getElementById("to").value,
    travelMode: "DRIVING",
    provideRouteAlternatives: true,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
  };

  directionsService.route(request, function (result, status) {
    if (status === "OK") {
      directionsDisplay.setDirections(result);
      var summaryPanel = document.getElementById("directions-panel");
      summaryPanel.innerHTML = "";

      for (var x = 0; x < result.routes.length; x++) {
        new google.maps.DirectionsRenderer({
          map: map,
          directions: result,
          routeIndex: x,
        });

        summaryPanel.innerHTML += "<hr><br><b> Route " + (x + 1) + ":<br>";
        var route = result.routes[x];
        for (var y = 0; y < route.legs.length; y++) {
          var routeSegment = y + 1;
        }
      }
    } else {
      window.alert("Directions request failed due to " + status);
    }
  });
}