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

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).