Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object

Viewed 12893

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.

1 Answers
Related