CODEWITHSUNDEEP
ajaxgoogle-maps-api-3callback
bruchowski
bruchowski

Reputation: 5351

Finding the distance between 2 points using Google Maps API

I am trying to find the distance between 2 points, one being from user input and the other an address from my database. I have put together the code below, which seems to work (I have test variables in place so no database pulls are being made for testing), however I have hit a wall; I cannot figure out why I need to click the button twice for the output to show?

Any help is much appreciated

CODE BELOW:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
<!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
    <script type="text/javascript">

 //var globalAddr = new Array();
 var globalName;
 var xmlhttp;
 var geocoder, location1, location2;
 var distanceVal;

    function initialize() {
        geocoder = new GClientGeocoder();
    }

        function showLocation() {
        geocoder.getLocations(document.getElementById("address1").value, function (response) {
            if (!response || response.Status.code != 200)
            {
                alert("Sorry, we were unable to geocode the first address");
            }
            else
            {
                location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                geocoder.getLocations(document.getElementById("address2").value, function (response) {
                    if (!response || response.Status.code != 200)
                    {
                        alert("Sorry, we were unable to geocode the second address");
                    }
                    else
                    {
                        location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                        calculateDistance();
                    }
                });
            }
        });
    }

    function calculateDistance()
    {

            var glatlng1 = new GLatLng(location1.lat, location1.lon);
            var glatlng2 = new GLatLng(location2.lat, location2.lon);
            var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
            var kmdistance = (miledistance * 1.609344).toFixed(1);

            distanceVal = miledistance;
    }

 function loadXMLDoc(url,cfunc)
 {
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
          }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
 }
 function getData(str)
        {
        loadXMLDoc("getData.php?address="+str,function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var x = xmlhttp.responseText;
                    var dnames = x.split("~~~");
                    var daddr = x.split("^^^");
                    daddr.shift();
                    dnames.pop();

                    var testArray = new Array('85281','18657','90210');

                    var shortest = 999999;

                    for(var i = 0; i <= testArray.length-1; i++)
                    {

                        document.getElementById("address2").value = testArray[i];//daddr[i];
                        showLocation();

                        //i get a blank alert 3 times here the first time, then I get the a value the 2nd time.. makes no sense!
                        alert(distanceVal);

                        if (shortest > distanceVal)
                        {
                            shortest = distanceVal;
                            globalName = dnames[i];
                        }

                    }

                    document.getElementById("results").innerHTML = globalName + " " + shortest;

                }
            })
        }

    </script>
  </head>

  <body onload="initialize()">

    <form>
      <p>
        <input type="text" id="address1" name="address1" class="address_input" size="40" />
        <input type="hidden" id="address2" name="address2" />
        <input type="hidden" id="distance" name="distance" />
        <input type="button" name="find" value="Search" onclick="getData(document.getElementsByName('address1')[0].value)"/>
      </p>
    </form>
    <p id="results"></p>

  </body>
</html>

Upvotes: 0

Views: 1692

Answers (1)

Andrew Leach
Andrew Leach

Reputation: 12983

When you call showLocation() in your getData() callback, that sets off two geocoder calls and if both are successful calls calculateDistance().

However, both those geocoder calls take time. The first getLocations() sets off a geocode request and lets it continue, to be dealt with in its callback. Within that function, there's another request which is dealt with in its own callback.

While those are waiting for results, the code execution has carried on and reached alert(distanceVal) even though calculateDistance() hasn't been called yet. Consequently distanceVal isn't set yet.

When you click the button again, the global distanceVal will have been populated through all the callback functions, so (even though the second set of geocodes/callbacks have not completed), it will have a value to display. However, if you change the values you are testing, you will find it's displaying the old value which is now incorrect.

Everything which depends on values found in a callback function must be processed within that callback function. If you move the display of data into calculateDistance() everything will be fine, because the data is available to that function.

Upvotes: 2

Related Questions