Location Not Displayed When Using Geo location in HTML5 - javascript

I'm developing a Phone Gap application. In that application I Want to show the current user's position. For that I used HTML5 geolocation. When I click on the Get Location button it doesn't display a location. It also doesn't display an error. After pressing the Get Location button it simply shows the button in the selected state.
<!DOCTYPE html>
<html>
<body>
<button onclick="getLocation()">Get Location</button>
<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>

You are referencing an element that doesn't exist.
Add a div to your html body with id="demo", like so:
<div id="demo"></div>
See it here on jsfiddle: http://jsfiddle.net/wU6AE/

Related

Get current location in JS/PHP

I am trying to get current location (with address, not only lat, long), But i am stuck that how to get?
Here is the code:
<button onclick="getLocation()">Click Me</button>
<div id="address"></div>
<script>
var x = document.getElementById("address");
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>
It's returning only latitude and longitude. But i need full address like Model town 30-A, Lahore or something like this address.
Here is the site which has this kind of functionality: https://gps-coordinates.org/my-location.php.
To check, open this link and see in the Address input.
Please help me. How can i get current address?

unable to get html5 geolocation

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.

Why does HTML5 Geolocation have inconsistent errorneous behavior in different web browsers

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

jQuery mobile and html5 location permission and values

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!

html5 geoloaction is not working in chrome/windows7 . But its working in chrome / XP ...Is there any issue with html5

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;
}
}
});

Categories

Resources