I am learning about html5 geolocation api, I have written this simple bit of code for practice. However I keep getting "location information unavailable", and I have no idea why. I am pretty new to this, and would appreciate some help.
Here is my code.
var userLocation = document.querySelector(".location");
document.getElementById("btn").addEventListener("click", function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition, showError);
userLocation.textContent = "Checking Location...";
}
else {
userLocation.textContent = "Unable to retrieve location..";
}
});
function showPosition(position){
userLocation.textContent = position.coords.longitude;
}
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;
}
}
Make sure that you are loading the page over httpS also make sure that you have never denied permission to location.
Related
I am creating a mobile webapp using php. And I need to get current user location i.e the location from where user is accessing the webapp. I have used HTML5 Geolocation for this as following:-
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
alert("Lat: " + position.coords.latitude + "\nLon: " + position.coords.longitude);
},
function(error){
alert(error.message);
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;
}
}, {
enableHighAccuracy: true
,timeout : 5000
} );
} else {
$('#demo').html('Geolocation is not supported by this browser.');
}
But the above code is not working. In firefox it throws
Unknown error acquiring position
and in chrome I am getting error message
User denied the request for geolocation
I have checked and location has been enabled in browser settings. I need to use app in mobile so is there any kind of check that can be added in javascript or PHP that asks user to enable location.
I have been testing a simple code fragment which returns the longitude and latitude values using the HTML5 Geolocation feature:
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;
}
}
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
I tested the code in Google Chrome directly from the 'Try it out' section and it returned 'error.PERMISSION_DENIED'. But it worked, when I deployed it in XAMPP under the localhost. Note that I have setup Google Chrome to share location details based on this documentation.
But this code returns 'error.POSITION_UNAVAILABLE' in Firefox even when deployed in XAMPP and when I agree to share my location in Firefox.
What causes this inconsistent behavior in Google Chrome (when called directly and when deployed under localhost) and when accessing through Firefox?
For sharing location you need secure connection. More: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins
I am trying to make a android webview app to use the user geoLocation :
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError,{maximumAge:60000, timeout:20000, enableHighAccuracy:true});
console.log("Location supported")
}
To show the position on success :
function showPosition(position) {
currentLatitude = position.coords.latitude;
currentLongitude = position.coords.longitude;
console.log( "In show : " + position.coords.latitude + ", " +position.coords.longitude)
}
To show the error code :
function showError(error) {
var x = $('#curr_loc_target');
console.log("In show Error");
switch(error.code) {
case error.PERMISSION_DENIED:
console.log("permission denied");
break;
case error.POSITION_UNAVAILABLE:
console.log("Location information is unavailable.");
break;
case error.TIMEOUT:
console.log("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
console.log("An unknown error occurred.");
break;
}
It works fine on any desktop web browser but not and mobile browser, there are to problems that :
1- The app don't ask the user for permission the use Location and the error from showError function is TIMEOUT,i think the webview code is irrelevant because
even on a mobile browser the problem is the same.
2- The values in longitude , latitude are equal to ' '.
If anyone think that i need to add it here, i will.
Thank for any help!
In my app I am trying to get the location of the device. If location services are on the app works fine. But if the location services are of in android I want the app to show a message that location services are off and prompt to enter address. My code is
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(init_pos,showerror);
}
else {
window.open("Location.aspx", '_self', location = true);
}
function showerror(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
window.open("Location.aspx", '_self', location = true);
break;
case error.POSITION_UNAVAILABLE:
window.open("Location.aspx", '_self', location = true);
break;
case error.TIMEOUT:
window.open("Location.aspx", '_self', location = true);
break;
case error.UNKNOWN_ERROR:
window.open("Location.aspx", '_self', location = true);
break;
}
}
}
function init_pos(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
window.open("home1.aspx?lat=" + lat + "&lng=" + long, '_self', location = true);
}
This code is working in local computers chrome but not in android device.
If you want to check whether your android devices's GPS enabled or not then you can use below snippet.
private LocationManager locManager;
locManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE);
if (locManager.isProviderEnabled(LocationManager.GPS_PROVIDER)) {
//GPS enabled }
else
{
//GPS not enabled
}
And i can't get anything out of the posted code to get current location.
For better understanding have a look at this http://www.androidhive.info/2012/07/android-gps-location-manager-tutorial/
I am creating hybrid application which should only work in chrome .In my app am using HTML5 geolocation..this is working fine in chrome/XP but its not working in chrome/windows 7 ... While executin the below function it is requesting me to allow to use current location .I clicked "allow" but after that no respond. I could not find the actual issue.Please help me out..
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(self.showPosition);
function showPosition(position)
{
var currentLatitude = position.coords.latitude;
var currentLongitude = position.coords.longitude;
localStorage.DeviceLocation=currentLatitude+","+currentLongitude;
$("#curr_loc_target").html("<b>Current location enabled as target </b> <BR> <b>Latitude :</b> "+currentLatitude.toFixed(5)+" <b>Longitude : </b>"+currentLongitude.toFixed(5));
$("#curr_loc_target").show();
}
}
This should give you the error you are looking for. It doesn't work on my chrome win 7 and the error is user permission denied when running locally, but not when uploaded to a server. Might try getting this onto a server instead of running with the file:/// protocol. Should do the trick. Chrome is pesky about what it allows when running locally.
$(document).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
function showPosition(position) {
var currentLatitude = position.coords.latitude;
var currentLongitude = position.coords.longitude;
alert(currentLongitude);
localStorage.DeviceLocation=currentLatitude+","+currentLongitude;
$("#curr_loc_target").html("<b>Current location enabled as target </b> <BR> <b>Latitude :</b> "+currentLatitude.toFixed(5)+" <b>Longitude : </b>"+currentLongitude.toFixed(5));
$("#curr_loc_target").show();
}
} else {
alert("geoloc not working");
}
function showError(error) {
var x = $('#curr_loc_target');
switch(error.code) {
case error.PERMISSION_DENIED:
x.html("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
x.html("Location information is unavailable.");
break;
case error.TIMEOUT:
x.html("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
x.html("An unknown error occurred.");
break;
}
}
});