How to get distance from a location to various locations by one click using Google maps API?

Question

Currently the program are working, but the interface are annoying that because of the alert() function I'm using in getData() function!! and when I delete this line from the getData() function the whole program goes wrong !! I don't know what the problem is ? dose anyone have a better idea to do such a process?

The program I'm trying to make here aims to help users find restaurant within 50km from their current address, I've already collected various location addresses and record it in the database.

initialize() function called when HTML body are loaded, in the first lines of the HTML body the restaurant data will be extract from MySQL using PHP which will print the data into JavaScript arrays jsres_add, jsres_id, jsres_name and jsnu so I can use them in JavaScript code. *please notice that the JavaScript code such as the below one are separated in .js file

var geocoder, location1, location2, gDir, oMap, jsnu, arraynu, address2;
jsres_add = new Array();
jsres_id = new Array();
jsres_name = new Array();

function initialize() {
    geocoder = new GClientGeocoder();
    gDir = new GDirections();
    GEvent.addListener(gDir, "load", function() {
        var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
        var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
        if (drivingDistanceKilometers < 50){
            // function to save search result within 50km into database using ajax
            saveSearchResult(jsres_id[arraynu],jsres_name[arraynu],drivingDistanceKilometers);
        }
    });
}

function getData() {
    emptytable(); //function to empty search result table using ajax
    //jsnu is the number of the restaurants data found in database
    for (var ii = 0; ii < jsnu; ii++) {
        arraynu = ii;
        address2 = jsres_add[ii];
        showLocation();
        alert("done!");
    }
    showResults(); //function to print out the search result from database into html body using ajax
}

function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
    if (!response || response.Status.code != 200){
        alert("Sorry, we were unable to geocode your address");
    }else{
        location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
        geocoder.getLocations(address2, 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};
                gDir.load('from: ' + location1.address + ' to: ' + location2.address);
            }
        });
    }
});
}

Pursuit

Answer 1

If the presence of alert() function makes code work I guess it's a problem related to timing, in particular it seems that your address2 gets overwritten before receiving a response from the geocoder service.

[EDIT]

After you setup the jsfiddle I examined your code more closely and got it to work:

http://jsfiddle.net/zuYXS/16/

address2 was indeed overwritten, but this wasn't the only problem, in fact all the variables you were using were global. In particular I had to create an instance of GDirections for each request you made (sharing one was overwriting the first result before it was displayed).

To understand why your code wasn't working I suggest you to search and study some material about asynchronous method calls.

Also as a general rule of the thumb (for Javascript and for programming in general) try to avoid putting variables in the global scope, but restrict their life to the smallest possible scope, this will help in many ways: it will reduce the chances of variables name clashes, while improving performances (variables will exist only when necessary) and readability of your code (it will be easier to keep track of the values).

Carnot

Unfortunately, it didn't work !! but as you said it's a timing problem, I don't know if it's possible to use some sort of event handler addlistener? – Pursuit

If you could setup a jsfiddle.net it would be easier for us to help you. Can you? – Carnot

I've shorten the program as simple as i could; so every one can see the problem easily, I've tested the program on my laptop before sharing it on jsfiddle.net and it was working, here it's jsfiddle.net/ibrahim_zahrani/zuYXS/6 – Pursuit

All right, got it to work: jsfiddle.net/zuYXS/16 I am updating my answer to explain what I had to change. – Carnot

Thanks a lot Andrea, I almost spent 2 weeks trying to fix the problem but unluckily all attempts failed, thank you again :) – Pursuit

+1 for providing help with the extra issues in the code. It's one thing to answer the question, another completely to provide useful knowledge about programming principals. – Viola

Answer 2

The directions service is asynchronous, you can't return anything from it, you need to use the data returned from the server in the callback routine.

You are using Google Maps API v2 syntax; that API is deprecated and will no longer be supported after May 19, 2013. New development with that version of the API is strongly discouraged.

re-write your code to use the Google Maps API v3

Patronymic