worklight v6.0 busy indicator issue with Android

Question

On Android (HTC Incredible S device and Android Virtual Device), when i navigate to my "where am i?" page:

1. init and showing busy indicator "Checking your location"
2. load google maps api
3. geolocation and display google map
4. hiding busy indicator

The first time i go to that page, the busy indicator is never shown.

The second time i go to that page, there's a "Loading" busy indicator freezing my app. i have to kill the process outside the app.

When i remove the lines of code for busy indicator, my application is working OK.

Here is the code with Busy Indicator freezing:

// Geolocation of collaborators
var map;
function initialize() {
    var busyInd = new WL.BusyIndicator('content', {text : 'Checking your location...'});
    busyInd.show();
    console.log('Initializing google Maps');

      // Try HTML5 geolocation
    if(navigator.geolocation) {
        var options = { timeout: 30000, enableHighAccuracy: true };

      navigator.geolocation.getCurrentPosition(function(position) {
        var mapOptions = {
                      zoom: 6,
                      streetViewControl: false,
                      mapTypeControl: false,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var infowindow = new google.maps.InfoWindow({
          map: map,
          position: pos,
          content: 'You are here',
          maxWidth: 60
        });
        map.setCenter(pos);
      }, function(error) {
          console.log('Hiding busy indicator when geolocation failed');
    busyInd.hide();
        handleNoGeowith location(true, error);
      }, options);
    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
      busyInd.hide();
    }
busyInd.hide();
}

function handleNoGeolocation(errorFlag, error) {
  console.log('Handle no geolocation message error');
var content;
if (errorFlag) {
  var errorCode = error.code;
  var errorMsg = error.message;
  content = 'Error: The Geolocation service failed. Code: '+errorCode+', Message: '+errorMsg;
} else {
  content = 'Error: Your browser doesn\'t support geolocation.';
}

alert(content);
}
var isGMapAPILoaded = false;
function loadGoogleMaps() {
  console.log('initializing google maps api');
    if(isGMapAPILoaded){
        // Google Maps API already loaded
        console.log('Google Maps API already loaded, call initialize');
        initialize();
    } else {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
        isGMapAPILoaded = true;
        console.log('Google Maps API loaded with success');
  }
 }

Answer 1

Have you tried creating your busy indicator object globally rather than inside this specific function (I also don't understand the scope of this "initialize" function... I assume this is app-specific code).

In your app's .js file (yourProject\apps\yourApp\common\yourApp.js) do something like this:

var busy;

function wlCommonInit() {

    busy = new WL.BusyIndicator();

Then, in your initialize() function, call busy.show() and busy.hide() when required.