JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<label>Origem: </label>
    <input type="text" id="origem"/>


    <label>Destino: </label>
    <input type="text" id="destino"/>

    <button id="botao">Calcular distância</button>

    <strong><span id="resultado"></span></strong>

JavaScript

var btn = document.querySelector("#botao");

        btn.addEventListener("click", () =>{
            var start = document.getElementById("origem").value;
            var end = document.getElementById("destino").value;

            var request = {
                origin: start,
                destination: end,
                travelMode: 'DRIVING'
             };

             var directionsService = new google.maps.DirectionsService();

             directionsService.route(request, function(result, status) {
                if (status == 'OK') {
                  document.getElementById("resultado").textContent = result.routes[0].legs[0].distance.text;
                }else{
                    console.log(result)
                }
             });
        })