Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use geolocation coordinates in HTML5?
HTML5 Geolocation API lets you share your location with your favorite websites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map. The geolocation coordinates specifies the geographic location of the device.
Geolocation methods getCurrentPosition() and getPositionUsingMethodName() specify the callback method that retrieves the location information. These methods are called asynchronously to an object Position which stores the complete location information.
The Position object specifies the current geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed.
The properties of the position object include −
Property | Type | Description |
| coords | objects | Specifies the geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed. |
| coords.latitude | Number | Specifies the latitude estimate in decimal degrees. The value range is [-90.00, +90.00]. |
| coords.longitude | Number | Specifies the longitude estimate in decimal degrees. The value range is [-180.00, +180.00]. |
The following makes use of the position object with the coordinates for latitude and longitude −
The geolocation object provides the following methods. All of them use the coordinates to retrieve location −
Method | Description |
getCurrentPosition() | This method retrieves the current geographic location of the user. |
watchPosition() | This method retrieves periodic updates about the current geographic location of the device. |
clearWatch() | This method cancels an ongoing watchPosition call. |
Example
You can try to run the following code to learn how to work with geolocation and use geolocation coordinates in HTML5. It retrieves periodic updates about the current geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var watchID;
var geoLoc;
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocationUpdate(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
geoLoc = navigator.geolocation;
watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");|
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="getLocationUpdate();" value="Watch Update"/>
</form>
</body>
</html>
234 Views
