JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <script src="https://maps.google.com/maps/api/js"></script>
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tbody>
      <tr>
        <td>
          <label for="txtOrigem"><strong>Endere&ccedil;o de origem</strong></label>
          <input type="text" id="txtOrigem" class="field" style="width: 400px" />

        </td>
      </tr>
      <tr>
        <td>
          <label for="txtDestino"><strong>Endere&ccedil;o de destino</strong></label>
          <input type="text" style="width: 400px" class="field" id="txtDestino" />

        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="Calcular dist&acirc;ncia" onclick="CalculaDistancia()" class="btnNew" />
        </td>
      </tr>
    </tbody>
  </table>
  <div><span id="litResultado">&nbsp;</span></div>
  <div style="padding: 10px 0 0; clear: both"></div>
  <iframe id="map" />
</body>

CSS

iframe {
  width: 640px;
  height: 480px;
  visibility: hidden;
}

JavaScript

function CalculaDistancia() {
  $('#litResultado').html('Aguarde...');
  //Instanciar o DistanceMatrixService
  var service = new google.maps.DistanceMatrixService();
  //executar o DistanceMatrixService
  service.getDistanceMatrix({
    //Origem
    origins: [$("#txtOrigem").val()],
    //Destino
    destinations: [$("#txtDestino").val()],
    //Modo (DRIVING | WALKING | BICYCLING)
    travelMode: google.maps.TravelMode.DRIVING,
    //Sistema de medida (METRIC | IMPERIAL)
    unitSystem: google.maps.UnitSystem.METRIC
      //Vai chamar o callback
  }, callback);
}
//Tratar o retorno do DistanceMatrixService
function callback(response, status) {
  //Verificar o Status
  if (status != google.maps.DistanceMatrixStatus.OK)
  //Se o status não for "OK"
    $('#litResultado').html(status);
  else {
    //Se o status for OK
    //Endereço de origem = response.originAddresses
    //Endereço de destino = response.destinationAddresses
    //Distância = response.rows[0].elements[0].distance.text
    //Duração = response.rows[0].elements[0].duration.text
    $('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
      "<br /><strong>Destino:</strong> " + response.destinationAddresses +
      "<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
      " <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text +
      " <br /><strong>Preço</strong>: R$ " + (parseFloat(response.rows[0].elements[0].distance.text.substring(0, response.rows[0].elements[0].distance.text.length - 3).split(",").join(".")) * 1.5).toFixed(2).toString().split(".").join(",")
    );
    //Expressão acima faz o seguinte:
    //1 - Extrair o valor da distância ("descartando" unidade de medida)
    //2 - Trocar a vírgula (separador decimal) por um ponto de modo a poder calcular o preço.
    //3 - Voltar a formatar o preço de forma adequada para mostrar ao utilizador.
    //Atualizar o mapa
    $("#map").attr("src",...