I am using visual studio Cordova tool for creating application. I am uding geolocation of HTML5 for getting user location.
When I execute it in ripple naxus-galaxy, it working fine, but when I run it in android device, it's not working at all. It shows me TimeOut error accured everytime.
I have already installed geoLocation plugin.
My code is,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>GeoLal</title>
<!-- GeoLal references -->
<link href="css/index.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
</head>
<body>
<p>Hello, your application is ready!</p>
<div id="map-canvas" style="position:absolute; width:100%; height:100%"></div>
<script>
var map;
function initialize() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError, { timeout: 15000, enableHighAccuracy: true });
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("Pos = " + JSON.stringify(position));
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("Please share your location with us to move ahead.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is not available, Check your internet connection.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("We are not able to fetch your location details.");
break;
}
initialize();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
And web.config is,
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.GeoLal" version="1.0.0.0" xmlns="http://www.w3.org/ns/widgets">
<name>GeoLal</name>
<description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
<author href="http://cordova.io" email="[email protected]">Apache Cordova Team </author>
<content src="index.html" />
<access origin="*" />
<preference name="SplashScreen" value="screen" />
<preference name="windows-target-version" value="8.0" />
<preference name="windows-phone-target-version" value="8.1" />
<vs:plugin name="org.apache.cordova.geolocation" version="0.3.10" />
<vs:platformSpecificValues />
</widget>
Do I need to change something in web.config file...?
getCurrentPosition()
makes a single request for the device position. If this is called immediately after the app starts, the timeout may occur before the GPS hardware on the device has had a chance to get a position fix.
I'd suggest using watchPosition()
instead to setup a watcher which will call the success function each time the OS receives a location update. If you only need a single position, you can clear the watcher once you've got a position of acceptable accuracy.
For example:
var minAccuracyInMetres = 50;
var positionWatcher;
function onDeviceReady(){
positionWatcher = navigator.geolocation.watchPosition(
geolocationSuccess,
geolocationError,
{maximumAge:0, timeout: 15000, enableHighAccuracy: true});
}
function geolocationSuccess(position){
// Reject if accuracy is not sufficient
if(position.coords.accuracy > minAccuracyInMetres){
return;
}
// Only single position required so clear watcher
navigator.geolocation.clearWatch(positionWatcher);
// Do something with the user's location...
}
document.addEventListener("deviceready", onDeviceReady, false);