Menu
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¢er=" + 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>
717
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);
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With