Reputation: 3812
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>
Upvotes: 0
Views: 79
Reputation: 180
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/
Upvotes: 1