I have followed a tutorial to create a map for my company. We want to dispatch customer appointment to the nearest salesman. https://developers.google.com/codelabs/maps-platform/google-maps-simple-store-locator#0

Everything is working fine, but I would like to add the journey duration aside the distance as shown in the image below. screenshot results store locator

I'm using this function to retrieve the route distances:

// Retrieve the distances of each store from the origin
// The returned list will be in the same order as the destinations list
const service = new google.maps.DistanceMatrixService();
const getDistanceMatrix =
  (service, parameters) => new Promise((resolve, reject) => {
    service.getDistanceMatrix(parameters, (response, status) => {
      if (status != google.maps.DistanceMatrixStatus.OK) {
        reject(response);
      } else {
        const distances = [];
        const results = response.rows[0].elements;
        for (let j = 0; j < results.length; j++) {
          const element = results[j];
          const distanceText = element.distance.text;
          const distanceVal = element.distance.value;
          const distanceObject = {
            storeid: stores[j],
            distanceText: distanceText,
            distanceVal: distanceVal,
          };
          distances.push(distanceObject);
        }

        resolve(distances);
      }
    });
  });

const distancesList = await getDistanceMatrix(service, {
  origins: [origin],
  destinations: destinations,
  travelMode: 'DRIVING',
  unitSystem: google.maps.UnitSystem.METRIC,
});

distancesList.sort((first, second) => {
  return first.distanceVal - second.distanceVal;
});

return distancesList;


let panel = document.createElement('div');
// If the panel already exists, use it. Else, create it and add to the page.
if (document.getElementById('panel')) {
  panel = document.getElementById('panel');
  // If panel is already open, close it
  if (panel.classList.contains('open')) {
    panel.classList.remove('open');
  }
} else {
  panel.setAttribute('id', 'panel');
  const body = document.body;
  body.insertBefore(panel, body.childNodes[0]);
}

// Clear the previous details
while (panel.lastChild) {
  panel.removeChild(panel.lastChild);
}

stores.forEach((store) => {
  // Add store details with text formatting
  const name = document.createElement('p');
  name.classList.add('place');
  const currentStore = data.getFeatureById(store.storeid);
  name.textContent = currentStore.getProperty('name');
  panel.appendChild(name);
  const distanceText = document.createElement('p');
  distanceText.classList.add('distanceText');
  distanceText.textContent = store.distanceText;
  panel.appendChild(distanceText);
});

// Open the panel
panel.classList.add('open');