HTML 5 geolocation using phoneGap

Question

I have created a script that will show the user's location using the geolocation library and it all works fine. I have exported this HTML 5 script using PhoneGap and can see that in Settings->Location Services My App is set to On. So I assumed every time I run My App I would not get the regular prompt ".... Would like to use your current location?" with the options Don't Allow or Ok.

I don't want to have people click Allow each time they open My App. Is there a reason why the app is not using the setting from Services->Location Settings? Below is the simple script:

<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <link rel="apple-touch-icon-precomposed" href="custom_icon_precomposed.png"/>
        <link rel="apple-touch-startup-image" href="apple-touch-icon-precomposed.png">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
            <script>

                jQuery(window).ready(function(){
                                     jQuery("#btnInit").click(initiate_watchlocation);
                                     jQuery("#btnStop").click(stop_watchlocation);
                                     });

                var watchProcess = null;

                function initiate_watchlocation() {  
                    if (watchProcess == null) {  
                        watchProcess = navigator.geolocation.watchPosition(handle_geolocation_query, handle_errors, {enableHighAccuracy:true});  
                    }  
                }  

                function stop_watchlocation() {  
                    if (watchProcess != null)  
                    {  
                        navigator.geolocation.clearWatch(watchProcess);  
                        watchProcess = null;  
                    }  
                }  

                function handle_errors(error)
                {
                    switch(error.code)
                    {
                        case error.PERMISSION_DENIED: alert("user did not share geolocation data");
                        break;

                        case error.POSITION_UNAVAILABLE: alert("could not detect current position");
                        break;

                        case error.TIMEOUT: alert("retrieving position timedout");
                        break;

                        default: alert("unknown error");
                        break;
                    }
                }

                function handle_geolocation_query(position) {  
                    var text = "Latitude: "  + position.coords.latitude  + "<br/>" +  
                    "Longitude: " + position.coords.longitude + "<br/>" +  
                    "Accuracy: "  + position.coords.accuracy  + "m<br/>" +  
                    "Time: " + new Date(position.timestamp);  
                    jQuery("#info").html(text);  

                    var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + ',' + position.coords.longitude +  
                    "&zoom=14&size=300x400&markers=color:blue|label:S|" + position.coords.latitude + ',' + position.coords.longitude;  

                    jQuery("#map").remove();  
                    jQuery(document.body).append(  
                                                 jQuery(document.createElement("img")).attr("src", image_url).attr('id','map')  
                                                 );  
                }  
                </script>
            </head>
    <body>
        <div>
            <button id="btnInit" >Monitor my location</button>

            <button id="btnStop" >Stop monitoring</button>
        </div>
        <div id="info"></div>
    </body>
</html>

Dan Carter · Accepted Answer · 2011-10-03 20:38:48Z

OK I looked all over and found it you must wait for the device to be ready then call your window.ready jquery inside that to utilize native functions. Thought I would post this as a noob it was tuff to find the answer I was looking for.

        // Wait for PhoneGap to load
        //
        document.addEventListener("deviceready", onDeviceReady, false);

        // PhoneGap is ready
        //
        function onDeviceReady() {
            jQuery(window).ready(function(){
                jQuery("#btnInit").click(initiate_watchlocation);
                jQuery("#btnStop").click(stop_watchlocation);
            });

        }

Collectives™ on Stack Overflow

HTML 5 geolocation using phoneGap

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related