Teach with us

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.

Live Demo

<!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>
Updated on 14-May-2020 10:46:51

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements