Geolocation for mobile devices - javascript

I have a problem with geolocation on idevices on my website.
Actually I just need to get latitude/longitude coordinates.
On PC, android devices everything is cool, on iphone it also fine but only if I use wifi connection. But when i'm on 3g or LTE with my old iPhone 5s I simply get nothing (but starting from iphone 6 it works).
I've read that Safari is not supporting geolocation if wifi is turned off.
But still what I need is to make it work on iDevices such as iPhone 4,5.
I'm using this piece of example code:
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

I'm an iPhone 5S owner and tried the geolocation over 3G and it works like a charm. I've tried this CodePen over Wifi and over 3G without any issues.
$(document).ready(function(){
setInterval(function(){
getLocation(function(position) {
//do something cool with position
currentLat = position.coords.latitude;
currentLng = position.coords.longitude;
$("#status").html(currentLat + " " + currentLng);
});
}, 1000);
});
var GPSTimeout = 10; //init global var NOTE: I noticed that 10 gives me the quickest result but play around with this number to your own liking
//function to be called where you want the location with the callback(position)
function getLocation(callback) {
if (navigator.geolocation) {
var clickedTime = (new Date()).getTime(); //get the current time
GPSTimeout = 10; //reset the timeout just in case you call it more then once
ensurePosition(callback, clickedTime); //call recursive function to get position
}
return true;
}
//recursive position function
function ensurePosition(callback, timestamp) {
if (GPSTimeout < 6000) {
//call the geolocation function
navigator.geolocation.getCurrentPosition(
function(position) //on success
{
//if the timestamp that is returned minus the time that was set when called is greater then 0 the position is up to date
if (position.timestamp - timestamp >= 0) {
GPSTimeout = 10; //reset timeout just in case
callback(position); //call the callback function you created
} else //the gps that was returned is not current and needs to be refreshed
{
GPSTimeout += GPSTimeout; //increase the timeout by itself n*2
ensurePosition(callback, timestamp); //call itself to refresh
}
},
function() //error: gps failed so we will try again
{
GPSTimeout += GPSTimeout; //increase the timeout by itself n*2
ensurePosition(callback, timestamp); //call itself to try again
}, {
maximumAge: 0,
timeout: GPSTimeout
}
)
}
}
Thanks to Chris Beckett for the sample.
Maybe you can provide more details if you can't get it working yet?
Ps: just editing to make sure everyone who needs geolocation check if location services for Safari is enabled:
First check if Location Services is enabled under: Settings > Privacy > Location Services
Next check if it is enabled for Safari Websites

Related

Geolocation API - always getting - Access is denied

I am using the code to get the geo-location on my site. for example
https://subdomain.domain.com/pwa
<script type = "text/javascript">
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation() {
if(navigator.geolocation) {
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
} else {
alert("Sorry, browser does not support geolocation!");
}
}
</script>
<form>
<input type = "button" onclick = "getLocation();" value = "Get Location"/>
</form>
I added the above code in geoWatch.html.
when I visit the page and click on - get location. I am prompted to allow for - Geolocation, which I accept and I can see the same in settings for website the geolocation is allowed.
but immediately after I click on accept the allow notification - I get the error alert - Error: Access is denied.
I remember it was working fine, what and where I messed up, can't figure out what went wrong, so I took this sample code and put this both in pwa folder as well as in the root of the site to test, if any other code is conflicting, but it didn't helped.
Additional Note:
I installed chrome canary and there it(same code) is working fine.
Edit: Even Chrome Canary worked for the first try only. any subsequent try getting same error.
but Samsung Mobile browser working fine even after multiple tries.

Catch html5 geolocation events

Is there a way to catch the html5 geolocation events?
Right now im using geolocator.js
and my problem is:
When the message pops up if i want to allow html5 locations if i accept it takes html5 location if I get ipLocation.
But I want to listen for these clicks so I can set a timeout if the user doesn't click for 10 seconds it automatically takes ip location.
Is there any way to get the event for "accept" and "decline"? Here is my code snippet for it
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
EDIT: Im using Chrome on iMac
EDIT 2:
var html5Options = { enableHighAccuracy: true,timeout: 10000, maximumAge: 0 };
EDIT 3: using the solution by kravitz
if (navigator.geolocation) {
waitTooLong=setTimeout(geoError, 15000);
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
function geoSuccess(position) {
clearTimeout(waitTooLong);
//doing my locationstuff
}
function geoError(error) {
//doing my locationstuff
clearTimeout(waitTooLong);
fallback(error);
}
var geoError = function(){
//get location failed so get manually by IP here
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
Above should work but if you want to be really sure:
var timeOut = setTimeout(geoError, 10000);
var geoSuccess = function(){
clearTimeout(timeOut);
};

HTML5 Geolocation - Not working all the time on iOS

Working currently with the HTML5 Geolocation and I've tested it on all web browsers and it seems to be working. However when I test the Geolocation on the iPad, it works for the iPad mini all the time, but when I put it on the bigger iPad (iPad 2) the location doesn't seem to work all the time.
I'm trying to do this web-side so that the solution can be ported over to multiple platforms and not just iOS.
Edit:
Just tried, It works in the safari browser but it's just not working inside the iOS application.
Does anyone have any ideas why it's not working?
Internet: Tried Wi-Fi and tried hotspot, and also tried Wi-Fi turned on without connecting to anyones.
iOS version: 8.3
The location should be displayed here:
$("#status").html(currentLat + " " + currentLng);
Code:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
//example
$(document).ready(function(){
setInterval(function(){
getLocation(function(position) {
//do something cool with position
currentLat = position.coords.latitude;
currentLng = position.coords.longitude;
$("#status").html(currentLat + " " + currentLng);
});
}, 1000);
});
var GPSTimeout = 10; //init global var NOTE: I noticed that 10 gives me the quickest result but play around with this number to your own liking
//function to be called where you want the location with the callback(position)
function getLocation(callback)
{
if(navigator.geolocation)
{
var clickedTime = (new Date()).getTime(); //get the current time
GPSTimeout = 10; //reset the timeout just in case you call it more then once
ensurePosition(callback, clickedTime); //call recursive function to get position
}
return true;
}
//recursive position function
function ensurePosition(callback, timestamp)
{
if(GPSTimeout < 6000)//set at what point you want to just give up
{
//call the geolocation function
navigator.geolocation.getCurrentPosition(
function(position) //on success
{
//if the timestamp that is returned minus the time that was set when called is greater then 0 the position is up to date
if(position.timestamp - timestamp >= 0)
{
GPSTimeout = 10; //reset timeout just in case
callback(position); //call the callback function you created
}
else //the gps that was returned is not current and needs to be refreshed
{
GPSTimeout += GPSTimeout; //increase the timeout by itself n*2
ensurePosition(callback, timestamp); //call itself to refresh
}
},
function() //error: gps failed so we will try again
{
GPSTimeout += GPSTimeout; //increase the timeout by itself n*2
ensurePosition(callback, timestamp);//call itself to try again
},
{maximumAge:0, timeout:GPSTimeout}
)
}
}
</script>
</head>
<body>
<div id="wrapper">
<!-- Page heading -->
<h1>Geolocation</h1>
<!-- Status -->
<p>Finding your location: <span id="status">checking...</span></p>
</body>
</html>
I thought you should get location's permission first.
Add NSLocationWhenInUseUsageDescription or NSLocationAlwaysUsageDescription in App-Info.plist and give it a string.
Try with above, and see if that helps.
simple for no timer
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<BR><BR><BR><BR>
<button onclick="getLocation()">get Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(alertPosition);
} else {
alert("Geolocation is not supported.");
}
}
function alertPosition(position) {
alert("Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude);
}
</script>
</body>
</html>

Why getCurrentPosition() fails after unlocking gps acces in googleChromeAndroid

I'm implementing some welcome messages to my site that show up at the beginning if the user hasn't enabled the Gps.
The thing is that after enabling the GPS via chrome UI js still can't access the gps postion (keep getting unables alerts on my web page). If page is reloaded then I can.
Is there a way to update the state of the blocking/nonblocking option without refreshing the whole web page ?
<script>
var button = document.getElementById("button");
button.onclick = function() {
var geoSuccess = function (position) {
var startPos = position;
alert("longlat" + startPos.coords.longitude);
};
var geoError = function (error) {
alert("unable");
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
</script>
Please check out this link :- GPS I do not know whether that is what you asked for but I can just tell it to you .It might help Please forgive me if that is irrelevant. The code is here :
<span id="demo" />
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
The code above does the following :
Check if Geolocation is supported
If supported, run the getCurrentPosition() method. If not, display a message to the user .
If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition )
NOTE : The showPosition() function gets the displays the Latitude and Longitude

mobile safari - navigator.geolocation.getCurrentPosition "chokes" application if bookmarked (fullscreen)

I discovered this strange behavior with the web application that I am developing using html5's geolocation API. The problem only occurs if the website is bookmarked and then run in the full screen mode on the iPad using
<meta name="apple-mobile-web-app-capable" content="yes" />
in the header.
The code I am using:
function getLocation() {
if (navigator.geolocation) {
alert("No problem up to here");
navigator.geolocation.getCurrentPosition(showPosition, noLocation, { timeout: 10000 });
}
else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("position: " + position.coords.latitude + ', ' + position.coords.longitude);
}
function noLocation(error) {
alert("error.code:" + error.code);
}
And then I am calling getLocation() from another function:
timer = window.setInterval(function () { getLocation() }, 10000);
(and yes, I already have declared timer)
I used the word "choke" because I can see "No problem up to here" alert every 10 seconds, the "position:" alert just once, and after then neither of the "position:" or "error.code:" alerts are showing up.
Any ideas why this is happening?

Categories