Home/ Questions/Q 8082191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T17:00:17+00:00

I am having a problem with the service.getDistanceMatrix call. <html> <head> <script type=text/javascript src=http://maps.google.com/maps/api/js?sensor=false>

  • 0

I am having a problem with the service.getDistanceMatrix call.

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript">

origin = "Chicago, IL";
destination = "Springfield, IL";
service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
{
    origins: [origin],
    destinations: [destination],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
}, 
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);
}
}

function doIt() {
origin1 = document.getElementById("orig");
destination1 = document.getElementById("dest");
service1 = new google.maps.DistanceMatrixService();


service1.getDistanceMatrix(
   {
        origins: [origin1],
        destinations: [destination1],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
    }, 
callback1
);


}

function callback1(response, status) {

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);
}
}



</script>
</head>
<body>
<br>
Basic example for using the Distance Matrix.<br><br>
Origin: <input id="orig" type="text" style="width:35em"><br><br>
Destination: <input id="dest" type="text" style="width:35em"><br><br>
Distance: <input id="dist" type="text" style="width:35em">
<button onClick="doIt()">Distance</button>
</body>
</html>

Most of this was taken directly from a google sample.
However, I am trying to add a button to refresh the form.
Something seems to be wrong in service1.getDistanceMatrix.
It seems to say error 0.

Any ideas to fix this?

thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    These references need .value at the end: 

    service1.getDistanceMatrix(
   {
    origins: [origin1.value],
    destinations: [destination1.value],

    Personally I would use document.getElementById for orig, dest and dist below (I feel it’s safer because it is more precise), but the way it is written it also works. I am a bit puzzled because I didn’t think it would work. There is orig, dest, dist defined in the first callback above but I don’t think they would be visible in callback1.

    function callback1(response, status) {

if(status=="OK") {
    orig.value = response.originAddresses[0];
    dest.value = response.destinationAddresses[0];
    dist.value = response.rows[0].elements[0].distance.text;
    • 0