Show distance, duration time as per the Google maps in Map using google API v3

In my project, I need to show a map same as the google maps. Like with 2 location distance, route, duration, etc. With the use of google API, I can get the distance and duration time for both the locations and route of two locations. I am attaching a screenshot of what I had achieved so far using Google API. I got the duration and distance, I have shown it in the textbox below the map.

Progress so far:

But now I want to show the distance and duration on the Map same as the Google maps.

Goal:

And similar to google maps if there is another route for the destination location then that need to show on the map.

Here is my JavaScript full code.

test.html

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap&libraries=&v=weekly"async></script>

<script>
function initMap() {
const map = new google.maps.Map(
  document.getElementById("map"), {
    zoom: 17.56,
    center: new google.maps.LatLng(40.82286053690113, -74.47670838043277), 
  });
  $(function () {
    $("#padcLocation").change(function () {
      let LocLongi,Loclati;
      let padcLoc = document.getElementById('padcLocation').value;
      if (padcLoc.includes('Clifton')) {
        Loclati = 40.84989924159685; 
        LocLongi = -74.15287810187937;
      }
      else {
        Loclati = 40.82286053690113;
        LocLongi = -74.47670838043277
      }
      const map = new google.maps.Map(
        document.getElementById("map"), {
        zoom: 17.56,
        center: new google.maps.LatLng(Loclati, LocLongi), 
      });
    });
  });
  $(function () {
    $("#patient_city").change(function () {
      let padcLoc = document.getElementById('padcLocation').value;
      let FinalAddress = document.getElementById('destinationAddress').value;
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      if (padcLoc == 'Clifton') {
        Loclati = 40.84989924159685; 
        LocLongi = -74.15287810187937;
      }
      else {
        Loclati = 40.82286053690113;
        LocLongi = -74.47670838043277
      }

      let geocoder = new google.maps.Geocoder;
      geocoder.geocode( { 'address': FinalAddress}, function(results, status) {
        
        if (status == google.maps.GeocoderStatus.OK) {
          let Lati = results[0].geometry.location.lat();
          let Longi = results[0].geometry.location.lng();
          latitude.value = Lati;
          longitude.value = Longi;

          const map = new google.maps.Map(
          document.getElementById("map"), {
            zoom: 17.56,
            center: new google.maps.LatLng(Lati, Longi), 
          });
          directionsRenderer.setMap(map);
        } 
        else {
          console.log("failed: status="+status);
        }
      });

      let service = new google.maps.DistanceMatrixService();
      service.getDistanceMatrix(
        {
            origins: [padcLoc],
            destinations: [FinalAddress],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
            avoidHighways: false,
            avoidTolls: false
        }, Mapcallback);

        var request = {
          origin: padcLoc,
          destination: FinalAddress,
          travelMode: google.maps.TravelMode['DRIVING']
        };
        directionsService.route(request, function(response, status) {
          if (status == 'OK') {
            directionsRenderer.setDirections(response);
          }
        });
      });
    });
 }

 function Mapcallback(response, status) {
      if (status != google.maps.DistanceMatrixStatus.OK) {
         alert("Error");
      } else {
          var origin = response.originAddresses[0];
          var destination = response.destinationAddresses[0];
          if (response.rows[0].elements[0].status === "OK") {
              var distance = response.rows[0].elements[0].distance;
              var duration = response.rows[0].elements[0].duration;
              var distance_in_kilo = distance.value / 1000; // the kilom
              var distance_in_mile = distance.value / 1609.34; // the mile
              var duration_text = duration.text;
              var duration_value = duration.value;
              document.getElementById('mapDuration').value = duration_text;
              document.getElementById('mapDistance').value = distance.text;
              let dtl = duration_text.split(' ')
              if (duration_text.includes('hours')){
                if (parseInt(dtl[0]) > 1){
                  alert("Sorry, Duration must be less than 2 hours but your's is " + duration_text + " far");
                }
              }else {
                alert("Great, Your duration is "+ duration_text)
              }
            }
            else{
              alert("Better get on a plane. There are no roads between " + origin + " and " + destination); 
          }
      }
  }
</script>

Note:

1. Here in code default map is showing with static Lati, Longi.
2. After selection of the Source Location(padcLoc) map will change as per the new Lati, Longi.
3. After selection of the destination and Location(FinalAddress) map will change with the route between the 2 locations, as per shown in 1st screenshot.
4. Now I want to show the distance and duration of the generated map as per google maps(shown in the 2nd screenshot).