Why my geocode cannot show the address

Question

var geocoder, map, point, fmtAdd, marker;

function mapLoad() {
geocoder = new google.maps.Geocoder();
var myOptions = {
  zoom: 15,
  mapTypeControl: false, 
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
address="W3 6BY";
if(address){geocoder.geocode({'address':address}, geocodeResult);}
else{alert("Postcode Incorrect");window.close();}
}

function geocodeResult(results, status) {
if (status == 'OK' && results.length > 0) {
    point=results[0].geometry.location;
    map.setCenter(point);
    marker = new google.maps.Marker({map: map, position: point, draggable: true});
    geocoder.geocode({latLng:point},function(results, status){
          if(status == 'OK') {
            if(results.length == 0) {
            fmtAdd = 'None';
            } else {
            fmtAdd = results[0].formatted_address;
            }
          } else {
            fmtAdd = 'Error';
          }
          alert(fmtAdd); // shows the address
        });
          alert(fmtAdd); // says undefined;
} else {
  alert("Error: " + status);
}
}
mapLoad();

I want to show the formatted address from user's input who are in the UK. But I don't understand why the second alert is undefined? Didn't I defined the variable "fmtAdd" at the first line?

Answer 1

Your "second" alert is actually your first alert since it is executed first (geocode() is non blocking - it returns immediately).
At that point you "defined" fmtAdd, but you didn't initialize it.

var foo; alert(foo);

alerts undefined.

---

answering comment:

I thought it was a global variable, and once the geocode give an value to it, I can retrieve that value even out of the geocode function.

This is correct. The variable is initialized once the callback function passed to geocode() sets a value to it. And exactly that happens. After that "event" you can retrieve the value from your global variable also outside of your function.

The problem here is that you're trying to retrieve the value from fmtAddr before your callback function has completed (or is even called).
This is because geocode() is non-blocking. This means that it returns immediately, this is why you pass a callback function to geocode().

What happens

referring to this part of the code:

geocoder.geocode({ latLng: point }, function (results, status) {
    if (status == 'OK') {
        if (results.length == 0) {
            fmtAdd = 'None';
        } else {
            fmtAdd = results[0].formatted_address;
        }
    } else {
        fmtAdd = 'Error';
    }
    alert(fmtAdd); // shows the address
});
alert(fmtAdd); // says undefined;

In chronological order:

1. you call geocode(), passing a callback to it
2. geocode() starts an asynchronous request to the google servers and returns immediately
3. alert(fmtAdd); // says undefined;
4. the asynchronous request completes and calls your callback function
5. your callback function sets fmtAddr

what you need to do

execute your application in the correct order:

• Create a function which does whatever you want to do with the formatted address.
• Call this function from your callback. That is, after you set fmtAdd

(actually better would be to pass the formatted address directly to this function as a parameter, without using global variables)