Finding Distance and Duration using Google Distance Matrix API in javascript

43 Views Asked by At

If someone could please help me figure out my code or at least give me some tips to finishing my code I would really appreciate it. It needs to also display the distance and estimated driving time which I'm having some trouble figuring out how to write it, but my toll calculator and payment type are working and display fine.

    <input type = "button" class = "btn btn-primary" id = "btn_GetToll" value = "Get Toll">
    <script>

        endpointAddressGetToll = "https://mnq35w4k5b.execute-api.us-east-1.amazonaws.com/default/GetToll";

        endpointAddressGetInterchangeInfo = "https://coljv06c3f.execute-api.us-east-1.amazonaws.com/default/GetInterchangeInfo";

        endpointAddressDistanceMatrixAPI = "https://api.distancematrix.ai/maps/api/distancematrix/json";
       var APIKey = '9YNnwFI6LLjk4tuYez6s0qRA0dz6W';




 $('#btn_GetToll').click(async function(){
            var interchangeEnter = $('select[id="interchangeEnter"]').val();
            console.log(interchangeEnter);
            var interchangeExit = $('select[id="interchangeExit"]').val();
            console.log(interchangeExit);
            var paymentType = $('select[id="paymentType"]').val();
            $.get(endpointAddressGetToll, {'interchangeEnter':interchangeEnter, 'interchangeExit':interchangeExit, 'paymentType':paymentType}, function(data){
                let tollprice = (data["APIMessage"]);
                console.log(paymentType);
                console.log(tollprice);
           
            var interchange=$('select[id="interchangeEnter"]').val();
            console.log(interchange);
            $.get(endpointAddressGetInterchangeInfo, {'interchange': interchangeEnter }, function(data){
                let enterlat = (data["API"].latitude);
                let enterlong = (data["API"].longitude);
                console.log(data);
                console.log(enterlat);
                console.log(enterlong);

            var interchange = $('select[id="interchangeExit"]').val();
            console.log(interchange);
            $.get(endpointAddressGetInterchangeInfo, {'interchange': interchangeExit}, function(data){
                let exitlat = (data["API"].latitude);
                let exitlong = (data["API"].longitude);

            //Distance Matrix API Part 3 Start//

             

            $.get(endpointAddressDistanceMatrixAPI, {'distance': distance});
            var distance = data.rows[0].elements[0].distance.text;

            $.get(endpointAddressDistanceMatrixAPI, {'duration': duration});
            var duration = data.rows[0].elements[0].duration.text;
            
           

                alert("The toll from interchange " + interchangeEnter + " to interchange " + interchangeExit +
                " paying with " + paymentType + " is $" + tollprice.toFixed(2) + "." + "The ");
                console.log(alert);
            })
            })
            })

        })
    </script>
    </body>
</html>

I know I need to add the longitude and latitude variables in and then add it to the alert at the bottom. I'm just stumped on this step and where to start. This is my first time adding multiple APIs

0

There are 0 best solutions below