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=".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.
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./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.
Share Improve this question asked Dec 8, 2013 at 0:56 user2280642user2280642 851 gold badge1 silver badge6 bronze badges 1- input elements are objects of type htmlElements I think. They are not the text that you're thinking. I think you can do like.. origin.value to get the string out. – user1600124 Commented Dec 8, 2013 at 1:59
1 Answer
Reset to default 1- You need to wait until the DOM has rendered before accessing it
- You can't just call the callback to the DirectionsMatrix, you need to send the request with the updated data
if you want the text value of a input element you need to get .value
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://maps.googleapis./maps/api/js?v=3&sensor=false"></script> <script type="text/javascript"> var service = new google.maps.DistanceMatrixService(); function calculateDistance(){ var origin = document.getElementById("orig").value; var destination = document.getElementById("dest").value; 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); } } google.maps.event.addDomListener(window,"load", calculateDistance); </script> <title>CalcuTrip</title> </head> <body> <label>Postcode 1</label> <input id="orig" type="text" value="KA12 6QE"> <label>Postcode 2</label> <input id="dest" type="text" value="SW1A 0AA"> "WC1X 9NT" <label>Get Distance!</label> <input type="button" value="Calculate Distance" onclick="calculateDistance()"> <input id="dist" type="text"> </body> </html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745543772a4632245.html
评论列表（0条）