HTML5 Geolocation is used to locate a user's position
Note: The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.
For getting user location, API use getCurrentPosition() method. This method gets longitude and latitude points of user. Latitude and longitude is a coordinate that enables every location on the Earth to be specified by a set of numbers and/or letters.
Here we demonstrate to pick current position (Latitude and Longitute) of user.
<!DOCTYPE html>
<html>
<head>
<title>Get latitude and longitude</title>
</head>
<body>
<p id="latLog"></p>
<script type="text/javascript">
var x = document.getElementById("latLog");
window.onload = 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>
</body>
</html>
Output
Latitude: 25.450001
Longitude: 81.849998
Note: Latitude and longitude values are differing for every user.
Now these values (latitude and longitude) we pass to goggle map API that display UI position of user.
HTML5 - Using Geolocation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var x = document.getElementById("ErrorMsg");
window.onload= function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else { x.innerHTML = "Geolocation is not supported by this browser."; }
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('mapholder')
mapholder.style.height = '200px';
mapholder.style.width = '600px';
var myOptions = {
center: latlon, zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
};
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var marker = new google.maps.Marker({ position: latlon, map: map, title: "You are here!" });
}
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>
</head>
<body>
<p id="ErrorMsg"></p>
<div id="mapholder" style="border:2px solid black;"></div>
</body>
</html>
Screen Shot
Handling Errors and Rejections
In the above code we used getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location.
Meaning of Error Codes:
· Permission denied - The user did not allow Geolocation
· Position unavailable - It is not possible to get the current location
· Timeout - The operation timed out
The other properties below are returned if available.
Property | Description |
coords.latitude | The latitude as a decimal number |
coords.longitude | The longitude as a decimal number |
coords.accuracy | The accuracy of position |
coords.altitude | The altitude in meters above the mean sea level |
coords.altitudeAccuracy | The altitude accuracy of position |
coords.heading | The heading as degrees clockwise from North |
coords.speed | The speed in meters per second |
timestamp | The date/time of the response |
Geolocation object - Other interesting Methods
watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
clearWatch() - Stops the watchPosition() method.
Leave Comment