I have just started to find that navigator.geolocation.getCurrentPosition does not work with Firefox when I decline to reveal my location. I.e. it does not return with the error as it did before. It works fine on Safari and Chrome but not Firefox 33.1
I can see this problem when running the w3schools example code (http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_error) which is as follows:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
This works on Firefox if I allow access to my position. If I deny access neither the showPosition or showError functions get called. Nothing happens. I have tried this with both Mac and PC Firefox and get the same problem. Works fine with Safari and Chrome though.
I have just discovered this is a feature of Firefox, or bug as I would prefer to call it. It is detailed here: https://bugzilla.mozilla.org/show_bug.cgi?id=675533
Related
The code below is working fine on my PC (Windows 10). But on my Android Phone it generate a PERMISSION DENIED message.
I am running this code from a local file (from my Download folder).
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
getLocation();
</script>
</body>
</html>
I have used the script below many times before although recently I have not been able to get it to work. When I try and run it I get the error Location information is unavailable.
I am not sure why. I have checked update notes of browsers etc. to see if this is a function that has been removed and I can't find reference to this being the case.
If anyone has any idea as to what I am doing wrong, I would be most grateful if you are able to point me in the right direction.
Thanks in advance!
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
I assume that You are using Chrome and Your website doesn't have SSL right? Unfortunately gelocation doesn't work on Chrome in that conditions. You must test on other browser ie. Firefox or get SSL for Your website.
i'm trying to get current location coordinates longitude and latitude.this code is correctly working on Firefox Microsoft edge.but isn't working properly on google chrome can any modification make it compatible with other browsers.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
I think that your problem is related to the fact, that Chrome blocks the localization for applications run from file system (i.e. from disk).
Have you deployed it on any kind of web server?
i have the following code:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(posi) {
var lat = posi.coords.latitude;
var lon = posi.coords.longitude;
console.log(lat);
}, showError);
} else {
$(".position").html("Geolocation is not supported by this browser");
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
alert(lat);
$(".weather").html("<p>" + lat + "</p>");
the problem is that at the alert(lat) at te bottom it says that
it is undefined and at the start at the if condition the console.log(lat)
works perfectly fine! what is wrong at the bottom?
i have tried making global variables lon, lat before if but the same thing happens.
For reference, here is the corrected code, based on the earlier comments:
function showError(error) {
[...] // No change.
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(posi) {
var lat = posi.coords.latitude;
var lon = posi.coords.longitude;
console.log(lat);
alert(lat);
$(".weather").html("<p>" + lat + "</p>");
}, showError);
} else {
$(".position").html("Geolocation is not supported by this browser");
}
I have three hidden variables on a form. I have to set these variables using a javascript function then I have to reload the page so I can use the form variables with some php code.
The problem I'm having is that, first, I don't know when I should call the javascript function. I managed to call it once I submit the form but then I can't get the page to refresh. So then I let the javascript function run when the page is first loaded but then I think the variables of the hidden fields are not properly set.
Here is my javascript code, the first version. In this version I have a gps function which is called once the form is submitted.
<script>
function gps(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(GetLocation, showError);
}
else {
alert('Geolocation is not supported for this Browser/OS version yet.');
}
}
function GetLocation(location) {
document.getElementById("latitude").value=location.coords.latitude;
document.getElementById("longitude").value=location.coords.longitude;
document.getElementById("accuracy").value=location.coords.accuracy;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
And this is my form code simplified
<form id="emoteForm" action="" onsubmit="gps(); return false;" target="_top" method="post" name="emote">
<input hidden="true" type="text" id="latitude" name="latitude">
<input hidden="true" type="text" id="longitude" name="longitude">
<input hidden="true" type="text" id="accuracy" name="accuracy">
<h4><input id="but" class="btn btn-primary btn-lg" role="button" value="Submit" type="submit" name="submit" onclick="show('form'); return FALSE;"></h4>
</form>
Now this is the php code that is before the html code of this page and that I have to run after the submission of the form.
<?PHP
session_start();
if(!isset($latitude)){
echo "Do something";
}
if(postvar("submit")=="Submit"){
echo "Submitting";
}
?>
So when I first load the page I get the "Do something" text which is fine since the latitude variable is still not set. When I hit the Submit button I get asked to allow to get my GPS location since it is calling the gps() function. In this function the variables latitude, longitude and accuracy are set. But then the page doesn't reload.
How can I then do both things, set the variable values when I submit then reload the page and keep the values so I can use them with my php code. Any ideas?
EDIT 1:
Added code to control if location is already set
<script>
function gps(){
if (navigator.geolocation) {
if (typeof localStorage['authorizedGeoLocation'] == "undefined" || localStorage['authorizedGeoLocation'] == "0") {
navigator.geolocation.getCurrentPosition(GetLocation, showError);
return false;
}else{
return true;}
}
else {
alert('Geolocation is not supported for this Browser/OS version yet.');
}
}
function GetLocation(location) {
document.getElementById("latitude").value=location.coords.latitude;
document.getElementById("longitude").value=location.coords.longitude;
document.getElementById("accuracy").value=location.coords.accuracy;
localStorage['authorizedGeoLocation'] = 1;
document.getElementById("emoteForm").submit();
}
}
function showError(error) {
localStorage['authorizedGeoLocation'] = 0;
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
You are cancelling the form submission when you use onsubmit="gps(); return false;" and that is correct; the getCurrentPosition() is asynchronous so you have to wait until it is finished, you can't submit the form right away.
When getCurrentPosition() is finished, the GetLocation() function gets called and the variables are filled in. Now you can submit the form so that a request to the server is made that includes the newly set values:
function GetLocation(location) {
document.getElementById("latitude").value=location.coords.latitude;
document.getElementById("longitude").value=location.coords.longitude;
document.getElementById("accuracy").value=location.coords.accuracy;
// submit the form
document.getElementById('emoteForm').submit();
}
Note that this could take some time, so you should probably show your visitor a message that the form is being submitted, disable the submit button, etc..
I finally managed to solve this by getting the location data before submitting the form. So I got rid of the gps() function and submitted the form normally. Like this.
<script>
if (navigator.geolocation) {
document.getElementById("but").disabled = true;
document.getElementById("but").value = "GPS information is loading";
navigator.geolocation.getCurrentPosition(GetLocation, showError);
}
else {
document.getElementById("but").disabled = true;
document.getElementById("but").value = "No GPS information";
alert('Geolocation is not supported for this Browser/OS version yet.');
}
function GetLocation(location) {
document.getElementById("latitude").value=location.coords.latitude;
document.getElementById("longitude").value=location.coords.longitude;
document.getElementById("accuracy").value=location.coords.accuracy;
document.getElementById("but").disabled = false;
document.getElementById("but").value = "Submit";
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>