How to get distance from location to different places with one click using Google Maps API?

Question

The program is currently running, but the interface is annoying because of the alert() function, which I use in the getData() function! and when I remove this line from the getData() function, the whole program goes wrong! I do not know what's the problem? Does anyone have a better idea for such a process?

The program I'm trying to do is aimed at helping users find a restaurant within a radius of 50 km from their current address, I have already collected various location addresses and recorded it in the database.

initialize() function that is called when the HTML body is loaded, in the first lines of the HTML body restaurant data will be extracted from MySQL using PHP, which will print the data in JavaScript arrays jsres_add, jsres_id, jsres_name and jsnu so that I can use them in JavaScript code . * note that JavaScript code like the one below is split into a .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 the alert() function does work with the code, I assume that this is a synchronization problem, in particular, it seems that your address2 rewritten before receiving a response from the geocoding service.

[EDIT]

After setting up jsfiddle, I carefully examined your code and made it work:

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

address2 was really rewritten, but this was not the only problem, because all the variables that you used were global. In particular, I had to create an instance of GDirections for each request you requested (sharing the first rewrote the first result before displaying it).

To understand why your code did not work, I suggest you find and study material about calling asynchronous methods.

Just like the general rule of thumb (for Javascript and for programming in general) try to avoid placing variables in the global scope, but limiting their life to the smallest possible scale, this will help in many ways: this will reduce the chances of matching variable names while improving performance (variables will only exist if necessary) and the readability of your code (it will be easier to track the values).

Answer 2

The referral service is asynchronous, you cannot return anything from it, you need to use the data returned from the server in the callback procedure.

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

rewrite your code to use the Google Maps v3 API