I was just trying to understand the code for calculating Distance & Time Between Two Locations using Java script Google Distance Matrix. But I got an error while I was executing it. Can you tell me why I am getting this error and how do I solve it?
Below is the code-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
defer
src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=YOUR_API_KEY"
type="text/javascript"
></script>
<link
href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
id="bootstrap-css"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>Calculate the Distance Between two Addresses demo</h1>
</div>
<div class="col-md-6">
<form id="distance_form">
<div class="form-group">
<label>Origin: </label>
<input
class="form-control"
id="from_places"
placeholder="Enter a location"
/>
<input id="origin" name="origin" required="" type="hidden" />
</div>
<div class="form-group">
<label>Destination: </label>
<input
class="form-control"
id="to_places"
placeholder="Enter a location"
/>
<input
id="destination"
name="destination"
required=""
type="hidden"
/>
</div>
<input class="btn btn-primary" type="submit" value="Calculate" />
</form>
<div id="result">
<ul class="list-group">
<li
id="mile"
class="list-group-item d-flex justify-content-between align-items-center"
>
Distance In Mile :
</li>
<li
id="kilo"
class="list-group-item d-flex justify-content-between align-items-center"
>
Distance is Kilo:
</li>
<li
id="text"
class="list-group-item d-flex justify-content-between align-items-center"
>
IN TEXT:
</li>
<li
id="minute"
class="list-group-item d-flex justify-content-between align-items-center"
>
IN MINUTES:
</li>
<li
id="from"
class="list-group-item d-flex justify-content-between align-items-center"
>
FROM:
</li>
<li
id="to"
class="list-group-item d-flex justify-content-between align-items-center"
>
TO:
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
$(function () {
// add input listeners
google.maps.event.addListener(window, "load", function (window) {
var from_places = new google.maps.places.Autocomplete(
document.getElementById("from_places")
);
var to_places = new google.maps.places.Autocomplete(
document.getElementById("to_places")
);
google.maps.event.addListener(
from_places,
"place_changed",
function () {
var from_place = from_places.getPlace();
var from_address = from_place.formatted_address;
$("#origin").val(from_address);
}
);
google.maps.event.addListener(
to_places,
"place_changed",
function () {
var to_place = to_places.getPlace();
var to_address = to_place.formatted_address;
$("#destination").val(to_address);
}
);
});
// calculate distance
function calculateDistance() {
var origin = $("#origin").val();
var destination = $("#destination").val();
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
// unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
avoidHighways: false,
avoidTolls: false,
},
callback
);
}
// get distance results
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
$("#result").html(err);
} else {
var origin = response.originAddresses[0];
console.log(origin);
var destination = response.destinationAddresses[0];
console.log(destination);
if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
$("#result").html(
"Better get on a plane. There are no roads between " +
origin +
" and " +
destination
);
} else {
var distance = response.rows[0].elements[0].distance;
console.log(distance);
var duration = response.rows[0].elements[0].duration;
console.log(duration);
console.log(response.rows[0].elements[0].distance);
var distance_in_kilo = distance.value / 1000; // the kilom
var distance_in_mile = distance.value / 1609.34; // the mile
console.log(distance_in_kilo);
console.log(distance_in_mile);
var duration_text = duration.text;
var duration_value = duration.value;
$("#mile").html(
`Distance in Miles: ${distance_in_mile.toFixed(2)}`
);
$("#kilo").html(
`Distance in Kilometre: ${distance_in_kilo.toFixed(2)}`
);
$("#text").html(`Distance in Text: ${duration_text}`);
$("#minute").html(`Distance in Minutes: ${duration_value}`);
$("#from").html(`Distance From: ${origin}`);
$("#to").text(`Distance to: ${destination}`);
}
}
}
// print results on submit the form
$("#distance_form").submit(function (e) {
e.preventDefault();
calculateDistance();
});
});
</script>
</body>
</html>
This is the error that I am getting in the console of chrome-
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at callback (index.html:169:47)
at distance_matrix.js:4:1044
at Zha.Mz (distance_matrix.js:4:219)
at Object.c [as _8jtuq2] (common.js:115:253)
at DistanceMatrixService.GetDistanceMatrix?1m1&2s&2m1&2s&3e0&4b0&5b0&6sen&7e1&callback=_xdc_._8jtuq2&key=YOUR_API_KEY&token=33059:1:28
Screenshot of UI and console showing the error: [1]: https://i.stack.imgur.com/sepCQ.png
