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.
Related
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
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>
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
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?
I got strange behavior when I tried to test my
"navigator.geolocation.getCurrentPosition" web page. Here is my
testing result and code:
my code:
function detectLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(geocodePosition, onError, { timeout: 30000 });
navigator.geolocation.watchPosition(watchGeocodePosition);
}
else
{
onError();
}
}
this function was run when "body" onload event was called. I had tried to change the timeout to 10000 and 20000, but I still got same result. I also allowed crome and firefox to get my location.
result:
Using chrome (v 17.0.963.79 m), result always went to onError
function when navigator.geolocation.getCurrentPosition was called.
Using Firefox (v 10.0.2), result always went to onError function
when navigator.geolocation.getCurrentPosition was called.
Using IE (v 9), result was fantastic, I got my current location.
can anyone help me in this strange situation? I really didn't have any idea to solve this problem and I was in hurry on my project deadline. Thanks before.
EDIT :
For this couple days I got some progress, the error code code is 2 with a message "Network location provider at 'https://maps.googleapis.com/maps/api/browserlocation/json?browser=chromium&sensor=true' : Response was malformed". Still unsolved, does anyone know how to solve this?
I simulated this problem and found that the success callback functions were only called when the html page was hosted on a web server and not when opened from a filesystem.
To test I opened the file directly from my C: drive and it the callbacks didn't work and then hosted the file on Internet Information Services (IIS) and the callbacks did work.
<html>
<body onload="detectLocation()">
<!-- This html must be hosted on a server for navigator.geolocation callbacks to work -->
<div id="status"></div>
<script type="text/javascript">
function detectLocation()
{
log("detectLocation() starting");
if (navigator.geolocation)
{
log("navigator.geolocation is supported");
navigator.geolocation.getCurrentPosition(geocodePosition, onError, { timeout: 30000 });
navigator.geolocation.watchPosition(watchGeocodePosition);
}
else
{
log("navigator.geolocation not supported");
}
}
function geocodePosition(){
log("geocodePosition() starting");
}
function watchGeocodePosition(){
log("watchGeocodePosition() starting");
}
function onError(error){
log("error " + error.code);
}
function log(msg){
document.getElementById("status").innerHTML = new Date() + " :: " + msg + "<br/>" + document.getElementById("status").innerHTML;
}
</script>
</body>
</html>
I also got this message:
message: "Network location provider at 'https://www.googleapis.com/' : Returned error code 404.", code: 2
I could solve it by switching on my wifi adapter
I had the same issue. Chrome browser wan not returning a position on 30000 miliseconds timeout. Firefox was not returning a position too. I added the option enableHighAccuracy and set it to false but nothing changed(false is the default option). When i change it to true then geolocation started working!
This is my final code,
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
// Get current cordinates.
positionCords = {"lat": position.coords.latitude, "lng": position.coords.longitude};
},
function(error) {
// On error code..
},
{timeout: 30000, enableHighAccuracy: true, maximumAge: 75000}
);
}
You need to be using https, not http.
The Chrome reference for this is here - https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
I know this is old topic but recently I had this error also:
message: "Network location provider at 'https://www.googleapis.com/' : Returned error code 404.", code: 2
The fix is to get api key for google maps and use it in your code
<script src='https://maps.googleapis.com/maps/api/jscallback=initMap
&signed_in=true&key=YOUR-API-KEY' async defer></script>
Here you can get API KEY: https://developers.google.com/maps/documentation/javascript/get-api-key#key
I had same issue and solution was to increase the timeout duration as mobile network are slower than wired network
{timeout: 30000, enableHighAccuracy: true, maximumAge: 75000}
along with enabling cellular positioning
In the Device Settings turn on "Wifi and Cellular positioning" option.
This will print the Latitude and Longitude of your Location
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
document.getElementById('idLatitude').value = position.coords.latitude;
document.getElementById('idLongitude').value = position.coords.longitude;
}
</script>
</head>
<body onload="getLocation()">
<form action="HelloWorld" method="post">
<input id="idLatitude" type="text" name="strLatitude">
<input id="idLongitude" type="text" name="strLongitude">
</form>
</body>
</html>