title: Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object
body: <p>I am writing a basic JavaScript program which finds the distance between two postcodes.
  The code is below:</p>
  
  <p>index.html</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;link rel="stylesheet" href="maps.css"&gt;
          &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
          &lt;script src="maps.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;title&gt;CalcuTrip&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;label&gt;Postcode 1&lt;/label&gt;
          &lt;input id="orig" type="text"&gt;
          &lt;label&gt;Postcode 2&lt;/label&gt;
          &lt;input id="dest" type="text"&gt;
          &lt;label&gt;Get Distance!&lt;/label&gt;
          &lt;input type="button" value="Calculate Distance" onclick="callback()"&gt;
          &lt;input id="dist" type="text"&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>maps.js</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>Whenever I run this I get the following error in the Chrome console window:</p>
  
  <blockquote>
    <p>Uncaught InvalidValueError: in property origins: at index 0: not a
    string, and not a LatLng or LatLngLiteral: not an Object</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>Any suggestions or tips on improving would be greatly appreciated.</p>
  
  <p>many thanks.  </p>