Colorbox Callback Loads Frame Before Code Finishes Executing

Question

I am using a jquery colorbox to load a google map static image. The title of the colorbox should display the address of the location displayed on the map. I am having trouble however getting the address before displaying the title. I am using the getReverseGeoCode function found here : Reverse Geocoding Code to obtain the address given the latitude and longitude coordinates (which is constantly being updated).

My Code:

$('.locationLink').unbind().click(function (e) {
    e.preventDefault();


mapImageURL = "Link To The Map Static Image with lat and long as parameters"
$.colorbox({
    iframe:false,
    width:"500px",
    height:"450px",
    html:"<img src = "+mapImageUrl+"></p>",
    onOpen: function(){
        getReverseGeocodingData(lat,long, function(address){
            formattedAddress = address;
        });
    },
    title:function(address){
        return formattedAddress;
    }
});
});

function getReverseGeocodingData(lat, lng, callback) {
    var latlng = new google.maps.LatLng(lat, lng);
    // This is making the Geocode request
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK) {
             alert(status);
         }

        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            address = (results[0].formatted_address);
            console.log('Address is:' + address);     
            callback(address);
        }

    });
}

The problem is that the lat and long is constantly being updated (and the colorbox shows the correct static image on open), however the address 'lags behind' (shows the last address, instead of the most recent one).

After some debugging I have concluded that the getReverseGeocoding function has not finished executing when the colorbox loads (hence it does not display the most recent address, instead it displays the address of the last lat and long used).

My question is how do I ensure that the getReverseGeocoding function has finished executing and obtained the most recent address, before the colorbox loads the title?

Really appreciate the help guys, sorry if i missed a bracket somewhere, new to stack overflow.

Peter

Are you able to abstract the `getReverseGeocodingData` function call from colorbox so that it loads the correct info and THEN opens the colorbox? — Tomanow, Dec 16 '13 at 15:27
Do you mean call it before i initialize the colorbox? If so, then yes I have, but it still isn't finished executing when the colorbox initializes — peterrandon, Dec 16 '13 at 15:38
I probably should have been clearer. The colorbox is opened on button click, the code will then get the current lat long, get the static map image and convert the lat long to the address to display as title — peterrandon, Dec 16 '13 at 15:57
Bind the geocode function call to the click event and the colorbox open to the geocode callback. If you post your click listener I can elaborate. — Tomanow, Dec 16 '13 at 15:59
Hi Tomanow, I have updated my code to include the click listener — peterrandon, Dec 16 '13 at 17:01
I tried exactly what Tomanow said and it is working now, thanks for your help! Unfortunately I cannot mark a comment as an answer — peterrandon, Dec 16 '13 at 18:11

Colorbox Callback Loads Frame Before Code Finishes Executing

0 Answers0