Displaying the projected distance and cost

Our last task in this project is to get the distance between the two markers and calculate the cost of the journey. Once calculated, we should probably display the results to the visitor too.

Engage Thrusters

First we should attach a click event handler for our <button>. Add the following code directly after the handler for the keyup event that we added in the last task:

$("body").on("click", "#getQuote", function (e) {
    e.preventDefault();

    $(this).remove();
});

Next we can get the distance between the two points. Directly after the remove() method we just added (but still inside the click handler function), add the following code:

new api.DistanceMatrixService().getDistanceMatrix({
    origins: [$("#StartPoint").attr("data-latLng")],
    destinations: [$("#EndPoint").attr("data-latLng")],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL
}, function (response) {

});

Now we just need to compute...