Why is PhoneGap Geolocation API causing my page to load so slowly?

Question

Having a bit of an issue with using geolocation plugin in Cordova/PhoneGap 3.4 environment. I am not loading the Geolocation API in onDeviceReady as it relies on loading Google Maps API and I'm pretty sure any app submitted to App Store will be rejected if it requests from internet upon initial load (anyone feel free to confirm of disprove this).

I'm using Jquery Mobile 1.4.2 and placed the geolocation code onto a separate 'locator' page which does not load via ajax. Then I'm calling the geolocation on button to display user's location on Google Map.

I'm testing out the app on an iPad and besides the fact that the Geolocation always seems to fail on detecting location the first time around (I've posted about this matter recently), the javascript seems to delay the page loading for up to almost 3 seconds (even on iOS simulator!).

I know excessive use of javascript can cause some lag in PG apps but I don't believe this is happening here. I am calling all the javascript inline:

<script type="text/javascript" charset="utf-8">
    // onSuccess Geolocation
    //
    function onSuccess(position) {
        var element = document.getElementById('geolocation');
        //OUTPUT COORDINATES INFORMATION INTO HTML
    element.innerHTML = '<h2>Detailed Gelocation information</h2><table class="geoTable"><tr><td class="noborder"></td><th>Latitude</th><th>Longitude</th><th>Altitude</th><th>Accuracy</th><th>Altitude Accuracy</th><th>Heading</th><th>Speed</th><th>Timestamp</th></tr>' +
            '<tr><td class="head">Data Value</td>' +
            '<td class="centre">' + position.coords.latitude  + '</td>' +
            '<td class="centre">' + position.coords.longitude + '</td>' +
            '<td class="centre">'  + position.coords.altitude + '</td>' +
            '<td class="centre">'  + position.coords.accuracy + '</td>' +
            '<td class="centre">'  + position.coords.altitudeAccuracy + '</td>' +
            '<td class="centre">'  + position.coords.heading + '</td>' +
            '<td class="centre">'  + position.coords.speed   + '</td>' +
            '<td class="centre">' + new Date(position.timestamp) + '</td></tr>'+
            '</table>' +
            '<p align="center"><button data-theme="h" onclick="resetLocation();">Clear GPS Location</button><br /></p>';


                    //GET LOCATION VARIABLES FROM API
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;
                    var yourStartLatLng = new google.maps.LatLng(lat, lng);

                    //PUT GMAPS INFORMATION INTO PAGE
                    $('#map_canvas').gmap({'center': yourStartLatLng});
                    $('#map_canvas').gmap('option', 'zoom', 19);
                    $('#map_canvas').gmap('option', 'mapTypeId', google.maps.MapTypeId.SATELLITE);
                    $('#map_canvas').gmap('addMarker', {
                                                        'position': yourStartLatLng, 
                                                        'draggable': false, 
                                                        'bounds': false
                                                        });
    }
    // onError Callback sends user an alert message and refreshes screen to load all scripts again
    //
    function onError(error) {
        alert('The Freshwater application failed to get your location. Please ensure that you have a successful WIFI or 3G/4G internet connection when using the Geolocation feature. ' +
              'The Locator screen will now be refreshed. Please attempt Geolocation again.');

    //navigator.geolocation.getCurrentPosition(onSuccess, onError,
      //{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: false } );
        //PUT A TIMER ON ERROR TO REFRESH PAGE FOR GPS
        setTimeout("window.location+='?refreshed';", .1000); 
    }

//RESET GEOLOCATION PAGE TO TAKE ANOTHER LOCATION READING
    function resetLocation(){
        setTimeout("window.location+='?refreshed';", .1000); 
    }

    //ATTACH FUNCTION TO BUTTON TO CALL GEOLOCATION
  function getLocation() {
        navigator.geolocation.getCurrentPosition(onSuccess ,onError,
      { timeout: 1000, enableHighAccuracy: true } );
    }
</script>

I know it's definitely the Geolocation calls that are causing the lag as I removed them from the page and tested the page load time. Has anyone experienced the same sort of problem? Does anyone have an idea why it affects the page load time so badly?

Answer 1

Bit of a slap in the face moment here. Just realised it was the Google Map Api loaded in via javascript which causing the problem. I've tried solving it by loading in the external script further down in the page but I've only experienced small improvement.

The catch 22 is i need to call this JS in the page. Is it possible to display a loader bar/graphic displays whilst page loads external js script so at least something is happening in the few seconds it downloads over relatively 'so-so' connections speed in Australia?