use the distance matrix service directly through JavaScript like below
function getDistance() { //Find the distance var distanceService = new google.maps.DistanceMatrixService(); distanceService.getDistanceMatrix({ origins: [$("#autocompleteDeparture").val()], destinations: [$("#autocompleteArrival").val()], travelMode: google.maps.TravelMode.WALKING, unitSystem: google.maps.UnitSystem.METRIC, durationInTraffic: true, avoidHighways: false, avoidTolls: false }, function (response, status) { if (status !== google.maps.DistanceMatrixStatus.OK) { console.log('Error:', status); } else { console.log(response); $("#distance").text(response.rows[0].elements[0].distance.text).show(); $("#duration").text(response.rows[0].elements[0].duration.text).show(); } }); }

After some more digging I found that the API does not support JSONP and that I could use the distance matrix service directly through JavaScript like so:
function getDistance() { //Find the distance var distanceService = new google.maps.DistanceMatrixService(); distanceService.getDistanceMatrix({ origins: [$("#autocompleteDeparture").val()], destinations: [$("#autocompleteArrival").val()], travelMode: google.maps.TravelMode.WALKING, unitSystem: google.maps.UnitSystem.METRIC, durationInTraffic: true, avoidHighways: false, avoidTolls: false }, function (response, status) { if (status !== google.maps.DistanceMatrixStatus.OK) { console.log('Error:', status); } else { console.log(response); $("#distance").text(response.rows[0].elements[0].distance.text).show(); $("#duration").text(response.rows[0].elements[0].duration.text).show(); } }); }