I am writing a basic JavaScript program which finds the distance between two postcodes. The code is below:
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="maps.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="maps.js" type="text/javascript"></script>
<title>CalcuTrip</title>
</head>
<body>
<label>Postcode 1</label>
<input id="orig" type="text">
<label>Postcode 2</label>
<input id="dest" type="text">
<label>Get Distance!</label>
<input type="button" value="Calculate Distance" onclick="callback()">
<input id="dist" type="text">
</body>
</html>
maps.js
var origin = document.getElementById("orig"),
destination = document.getElementById("dest"),
service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false,
unitSystem: google.maps.UnitSystem.IMPERIAL
},
callback
);
function callback(response, status) {
var orig = document.getElementById("orig"),
dest = document.getElementById("dest"),
dist = document.getElementById("dist");
if(status=="OK") {
orig.value = response.originAddresses[0];
dest.value = response.destinationAddresses[0];
dist.value = response.rows[0].elements[0].distance.text;
} else {
alert("Error: " + status);
}
}
Whenever I run this I get the following error in the Chrome console window:
Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object
I am by no means a JavaScript expert but in my mind the input boxes are already of type text so there is a string element present although at runtime the initial values will be nothing.
Any suggestions or tips on improving would be greatly appreciated.
many thanks.