I'm using watchPosition on a small application and I'm using both high accuracy positioning (GPS) and Coarse Positioning (Network based) to limit battery consumption.
To enable coarse positioning, I use following command :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });`
and To enable Fine Positioning :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });
To reset watching, I using clearWatch :
navigator.geolocation.clearWatch(watchID);
Strange thing is that after enabling Fine positioning, I cannot switch back to coarse positioning (GPS icon on android is still on).
for example :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false }); // GPS icon is off which is OK
navigator.geolocation.clearWatch(watchID); //GPS icon still off (OK)
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true }); // GPS icon become on (which is OK)
navigator.geolocation.clearWatch(watchID); //GPS icon become off (OK)
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false }); // GPS icon is on which is **NOT OK**
I'm using Android 5.1.1.
Full example code :
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", WatchCoarse, false);
var watchID = null;
// device APIs are available
//
function WatchCoarse() {
// Get the most accurate position updates available on the
// device.
var options = { enableHighAccuracy: false };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });
}
function WatchFine() {
// Get the most accurate position updates available on the
// device.
var options = { enableHighAccuracy: true };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// clear the watch that was started earlier
//
function clearWatch() {
if (watchID != null) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">Watching geolocation...</p>
<button onclick="clearWatch();">Clear Watch</button>
<button onclick="WatchCoarse();">Watch Coarse</button>
<button onclick="WatchFine()">Watch Fine</button>
</body>
</html>
i have this simple app , that works fine in a browser , but when building it using phonegap it's just shows a simple html page, means that jquery not working ,
in my page i call the jquery mobile.min.css ,jquery.min.js than this script :
$(document).bind("pagebeforechange", function (event, data) {
$.mobile.pageData = (data && data.options && data.options.pageData)
? data.options.pageData
: null;
});
$(document).ready( function (event) {
compSearch('');
$("#searchbtn").click(function () {
var sText = $("#searchtxt").val();
$("#search").dialog("close");
compSearch(sText)
});
});
function compSearch(searchString) {
var theUrl = serverName + "MobileService.asmx/getOrgPage";
var orgId = qString("org");
$.ajax({
type: "POST",
url: theUrl,
data: '{"OrgId":' + orgId +
',"SearchString":"' + searchString +
'"}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (msg) {
var s = msg.d[0];
$("#header").html(s).trigger("create");
$("#footer").html(msg.d[3]).trigger("create");
$("#contentHeading").html(msg.d[1]);
$("#content").html(msg.d[2]).find("ul").listview();
$("#newscontent").html(msg.d[4]);
},
error: function (msg) {
alert('error ' + msg.d[0]);
}
});
}
$(document).on('pagebeforeshow', '#indivnews', function (event, data) {
if ($.mobile.pageData && $.mobile.pageData.np) {
var orgId = qString("org");
var itemId = $.mobile.pageData.np;
var theUrl = serverName + "MobileService.asmx/getNewsPage";
var clubName = "";
$.ajax({
type: "POST",
url: theUrl,
data: '{"orgId":' + orgId +
',"compId":' + 0 +
',"itemId":' + itemId +
',"clubName":"' + clubName +
'"}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (msg) {
var s = msg.d[0];
$("#indivcontent").html(msg.d[4]);
},
error: function (msg) {
alert('error ' + msg.d[0]);
}
});
}
});
than the jquery mobile.min.js
like i said it's works fine in a browser,please if you have and idea to solve it
thank you.
It may be that you are loading the html page before PQ and JQM are properly initialized. I use the following in my project to ensure the framework is loaded correctly:
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).one("pageinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(frameworksLoaded);
function frameworksLoaded() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
jQm.allowCrossDomainPages = true;
console.log('PG & JQM ready');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width =device-width, initial-scale=1.0, user-scalable=no" />
<title>Test</title>
<link href="Example.css" rel="stylesheet" />
<link href="../www/Content/jquery.mobile-1.4.0.css" rel="stylesheet" />
<link href="../www/Content/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<script src="../www/Scripts/jquery-2.1.0.min.js"></script>
</head>
<body>
</body>
</html>
Reference to Deferred and Jquery Promises:
http://api.jquery.com/deferred.promise/
I am having trouble to get this HTML5 geolocation app for Android running. The app works fine in Firefox browser from my desktop, but once I compile it using Eclipse - PhoneGap, the geolocation button does not perform the command document.write, I have tried with alert(), as well as console.log(), but there is no positive result.
The code is below, can you please point to me if I am missing setting up any of the phone sensors for geolocation?
Below is the code:
<html>
<head>
<meta charset="UTF-8">
<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script> // Begginning of Google Maps script
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h#219000000"],[["http://mt0.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();
</script> / End of Google Maps script
<script> // Script that runs the app
$(document).ready(function() {
$('#startGeo').click(checkLocation);
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation, locationFail);
}
else {
document.write('You dont have geolocation');
}
} // ends checkLocation()
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
document.write(' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);
}
function locationFail() {
document.write('We did not get your location. You are safe from big broda');
}
});
</script>
</headd>
<body>
<button id="startGeo"> Click here for geolocation </button>
</body>
</html>
document.write seems to be the cause of your problem, rather than a failure in geolocation, assuming of course you have adequate permissions in your AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
Try this:
<html>
<head>
<meta charset="UTF-8">
<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script> // Begginning of Google Maps script
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h#219000000"],[["http://mt0.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();
</script> / End of Google Maps script
<script> // Script that runs the app
$(document).ready(function() {
$('#startGeo').click(checkLocation);
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation, locationFail);
}
else {
$('#result').append('You dont have geolocation');
}
} // ends checkLocation()
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
$('#result').append("location: "+' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);
}
function locationFail() {
$('#result').append('We did not get your location. You are safe from big broda');
}
});
</script>
</head>
<body>
<button id="startGeo"> Click here for geolocation </button>
<div id="result"></div>
</body>
BTW, there's a typo in your source code </headd> should be </head>.
You should also really use $(document).on("deviceready") instead of $(document).ready() with Phonegap as 'ready' event only indicates DOM is ready whereas 'deviceready' indicates Phonegap has fully loaded.
I am Designing a mobile app on phonegap. In this I am trying to get curent location of user. But I am not getting the map on Andriod Emulator.
I used this code :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Map</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError,{alert("error"),"enableHighAccuracy":true,"timeout":3000});
}
//GEOLOCATION
var onSuccess = function(position) {
alert("Latitude: " + position.coords.latitude + "\n" +
"Longitude:" + position.coords.longitude + "\n");
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
//MAP
var mapOptions = {
center: new google.maps.LatLng(myLat, myLong),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert("code: " + error.code + "\n" +
"message: " + error.message + "\n");
}
</script>
</head>
<body onload="onLoad()">
<div>map</div>
<div id="map_canvas" style="width:100px; height: 100px;" ></div>
</body>
</html>
I don't know where I am gng wrong.Can any one please help me on this?
Check this code... change cordova-1.8.1.js into ur cordova2.0.js... remaining source is refer thro online. If its not works. then there problem in ur phonegap configuration.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset ="utf-8" src="cordova-1.8.1.js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>