javascript function is returning undefined

Question

I'm trying to implement google maps and the problem I am having is that when I call the function getLatLng, it is returning an undefined value and I can't figure out why.

    initialize();

    var map;
    var geocoder;   

    function initialize() {

        geocoder = new google.maps.Geocoder();
        var address = "Rochester, MN";
        var myLatLng = getLatLng(address);
        console.log("myLatLng = "+myLatLng);

    }

    function getLatLng(address) {

        var codedAddress;

        geocoder.geocode({'address': address}, function(results, status) {

            if(status == google.maps.GeocoderStatus.OK) {
                codedAddress = results[0].geometry.location;
                console.log("codedAddress 1 = "+codedAddress);
            } else {
                alert("There was a problem with the map");
            }
            console.log("codedAddress 2 = "+codedAddress);
        });

        console.log("codedAddress 3 = "+codedAddress);
        return codedAddress;
    }

In the firebug console, here is the output that I get in this exact order:

codedAddress 3 = undefined
myLatLng = undefined
codedAddress 1 = (44.0216306, -92.46989919999999)
codedAddress 2 = (44.0216306, -92.46989919999999)

Why is codedAddress 3 and myLatLng showing up first in the console?

Emmett · Accepted Answer · 2011-05-25 03:09:28Z

6

geocode is asynchronous (i.e. it sends a request to Google's servers), so you need to pass a callback function to getLatLng, rather than having it return immediately:

function getLatLng(address, callback) {
    var codedAddress;

    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            codedAddress = results[0].geometry.location;
            console.log("codedAddress 1 = "+codedAddress);
        } else {
            alert("There was a problem with the map");
        }
        console.log("codedAddress 2 = "+codedAddress);

        callback(codedAddress);
    });
}

edited May 25, 2011 at 3:09

answered May 25, 2011 at 2:58

Emmett

14.4k12 gold badges58 silver badges82 bronze badges

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

6 Comments

Catfish Over a year ago

This may be a dumb question, but i've added the callback to the function parameters and at the end of the geocode statement as you've showed, but now when I call getLatLng like this: var myLatLng = getLatLng(address, callback); I get nothing in the console and no map shows up.

Emmett Over a year ago

What callback function are you passing? It needs to be of the form var myLatLng = getLatLng(address, function(codedAddress) { /* do something */ });

Catfish Over a year ago

I'm not sure I understand. What would need to go in the "do something" piece? I just want to assign the value from getLatLng to a variable.

Emmett Over a year ago

@Catfish Everything you need to do with the codedAddress belongs in the callback (the "do something" piece). This is how asynchronous programming works.

Catfish Over a year ago

The callback function probably is the correct solution, but I wasn't able to get it figured out. I used Scott's solution and it worked.

|

Code Maverick · Accepted Answer · 2014-03-14 16:01:45Z

Here's what I got to work via the Google Maps documentation:

  var geocoder;
  var map;

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var address = "Rochester, MN";
    var latlng = codeAddress(address);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

Here's a jsFiddle to see it in action. Obviously, you can update this to use jQuery if you need to.

dtbarne · Accepted Answer · 2011-05-25 02:47:36Z

1

You're missing a closing } for the initialize function.

answered May 25, 2011 at 2:47

dtbarne

8,2505 gold badges47 silver badges49 bronze badges

1 Comment

Catfish Over a year ago

No I actually had a closing Bracket, but I just left out some other stuff and forgot to copy that bracket.

Collectives™ on Stack Overflow

javascript function is returning undefined

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related