Javascript function returns undefined instead of a number

Question

I have two Javascript functions that try to find the latitude and longitude of an address using Google Maps API Geocode:

function getLatLon(address) {
    var location = -1;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var lat = results[0].geometry.location.lat();
            var lon = results[0].geometry.location.lng();
            location = new Array(lat, lon);
            //document.getElementById('results').innerHTML = location[0];
        } else {
            alert("Geocode was not successful.");
        }
    });
    return location;
}

function search() {
    var address = document.getElementById('address').value;
    var location = getLatLon(address);
    document.getElementById('results').innerHTML = location[0];
}

While the location[0] inside getLatLon() prints out the correct number in the #results div, the location[0] inside search() returns undefined. Do you have any ideas why this might happen? I've tried returning a plain string ("Hello") from getLatLon() instead and that works just fine.

Is geocoder.geocode asynchronous? If yes, getLatLon should always return -1. Always — beatgammit
– beatgammit, Commented Nov 26, 2012 at 4:02
Uh, I have a question. How can getLatLon returning undefined? location is -1, so it should be returning -1 as well. — Derek 朕會功夫
– Derek 朕會功夫, Commented Nov 26, 2012 at 4:07
@Derek - I think the problem is location[0] is undefined not getLatLon(). Poor question wording IMO. — beatgammit
– beatgammit, Commented Nov 26, 2012 at 4:10

Mike Valenty · Accepted Answer · 2012-11-26 04:05:13Z

6

The problem is geocoder.geocode(...) is asynchronous so you can't return a value. Try it like this instead:

function getLatLon(address, callback) {
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var lat = results[0].geometry.location.lat();
            var lon = results[0].geometry.location.lng();
            location = new Array(lat, lon);
            callback(location);
        } else {
            alert("Geocode was not successful.");
        }
    });
}

function search() {
    var address = document.getElementById('address').value;
    getLatLon(address, function(location) {
        document.getElementById('results').innerHTML = location[0];
    });
}

answered Nov 26, 2012 at 4:05

Mike Valenty

9,0312 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan Hwa Over a year ago

Clearly I need a better understanding of callbacks. Thanks!

Jonathan Hwa Over a year ago

For anyone who has a similar problem, here's an article I used to understand callbacks.

Ted Hopp · Accepted Answer · 2012-11-26 04:06:34Z

2

According to the API docs, calling geocoder.geocode(request, callback_function) will return nothing right away. When the response has been received and processed, the callback_function will be called. Until then, location will be left at whatever value you set it.

You need to start the search itself in the call-back function when you call getLatLon. For flexibility, you might do this by adding a call-back parameter to getLatLon that will be called from within the geocode() call-back function.

answered Nov 26, 2012 at 4:06

Ted Hopp

235k49 gold badges413 silver badges533 bronze badges

Collectives™ on Stack Overflow

Javascript function returns undefined instead of a number

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related