Tengo rutas dibujadas desde el Punto A hasta el Punto B. No puedo mostrar la información de la ruta en las rutas igual que aparece en el mapa de Google.

Necesito hacer que se vea como el mapa de Google.

y cuando el usuario haga clic en cualquier ruta, la misma ruta debería mostrarse seleccionada.

Los siguientes son el código.

 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); } }); }