Question

I’m trying to figure out a way to run a progress loader while google maps processes and renders a kml.

I have a listener setup for status_changed.

google.maps.event.addListener(kmllayer, "status_changed", function() {
    var kmlstatus = kmllayer.getStatus();
    if (kmlstatus != 'OK') {
        $('kmllayerlist').append($('<div class="kmllayeritem">Error Loading KML' + kmlstatus +'</div>'));
    } else {
        var itemhostname = kmllayerURL.split("/");
        $('#kmllayerlist').append($('<div class="kmllayeritem"><input type="checkbox" class="kmllayerchx" CHECKED><img src="http://www.google.com/s2/favicons?domain='+itemhostname[2]+'" class="kmllisticon" alt="kmlurlicon">'+itemhostname[(itemhostname.length - 1)]+'</input></div>'));
        kmllayerarr.push(kmllayerURL);
    }
});

How do I have a function run until the listener is fired? I’m thinking something like below, but I can’t think of a good condition to break the while statement.

while () {
  //function to run until listener fires
}

Working Code Block

function addkmlLayer_m(kmllayerURL) {
kmllayer = new google.maps.KmlLayer(kmllayerURL, {
    preserveViewport: true
});
kmllayer.setMap(map);
var itemhostname = kmllayerURL.split("/");
var kmlstatus_boo;
function kmlProgress() {
    if (kmlstatus_boo != 'done') {
        google.maps.event.addListener(kmllayer, "status_changed", function() {
            kmlstatus_boo = 'done';
            $('#progress').remove();
            kmlstatus = kmllayer.getStatus();
            if (kmlstatus != 'OK') {
                $('#kmllayerlist').append($('<div id="kmllayeritem_error" class="kmllayeritem">Error Loading KML ' + kmlstatus +'<input class="kmldel" type="image" src="../images/delete.png" name="delete kml" OnClick="delkmlerr();" /></div>'));
            } else {
                kmllayerarr.push(kmllayer);

                $('#kmllayerlist').append($('<div id="kmllayeritem_'+kmllayerarr.length+'" class="kmllayeritem"><input type="checkbox" class="kmllayerchx" CHECKED><img src="http://www.google.com/s2/favicons?domain='+itemhostname[2]+'" class="kmllisticon" alt="kmlurlicon">'+itemhostname[(itemhostname.length - 1)]+'</input><input class="kmldel" type="image" src="../images/delete.png" name="delete kml" OnClick="delkmlitem('+kmllayerarr.length+');" /></div>'));
            }
        });
        $('#kmllayerlist').append($('<div/>', {'id':'progress','class':'kmllayeritem','text':'Loading '+itemhostname[(itemhostname.length - 1)]+' KML'}));
        kmlstatus_boo = null; // free the closure
    } else {
        window.setInterval(kmlProgress,400); // Run again in 400ms changed so the user actually sees the loading image.
    }
}
kmlProgress();

}

Answer 1

Unfortunately, if you run a while loop like that, waiting for the listener to fire, it will never happen. Javascript is single-threaded. Therefore, you’ll need to give up time to the browser so that it can do its work. Try something along these lines:

var myRelevantValue = "something";
function myTimer() {
    if (myRelevantValue == "done") {
        // It changed.
        myRelevantValue = null; // free the closure
    } else {
        // Update progress bar
        window.setInterval(myTimer,100); // Run again in 100ms
    }
}
window.setInterval(myTimer,100); // Run in 100ms

Inside your listener, set the value of your variable to something useful, and this timer will catch it when it happens.