Post
Ask Question

Geolocation API In HTML 5

Introduction

 
The Geolocation API (JavaScript-based) is used for locating the user's position. It lets you share your location with trusted websites. Today most browsers (for Desktop as well as mobile devices) support the Geolocation API.
 
image1.jpg
 

How the Geolocation API determines your location

 
There are many techniques used to determine/identify the location of the user but they vary in the degree of accuracy. Desktop browsers can use the IP Address (this method is reliable to the city level) or WiFi to detect your location whereas Mobile devices can use the Global Positioning System (GPS), WiFi and Cell Phone Triangulation. GPS provides the most accurate location. Cell Phone Triangulation determines the location much faster compared to GPS but the location's accuracy is less than for GPS.
 
image2.jpg
 
Browser Support for Geolocation
 
image3.jpg
 
We can also check Browser Compatibility using the Geolocation property of the Navigator object.
  1. if(navigator.geolocation)  
  2. {  
  3.            alert("Your Browser Support Geolocation API");  
  4. }  
  5. else  
  6. {  
  7.             alert("Your Browser does not Support Geolocation API");  
  8. } 
Before beginning to look, the following are a couple of geographical definitions:
  • Latitude: Latitude specifies a north and south point on Earth. It is measured from the equator.
  • Longitude: Longitude specifies an east and west point. It is measured from Greenwich, England.
Example 1
 
In this example, we get our Location Coordinates (in other words latitude and longitude). The things we have done here are:
  1. Create a paragraph tag in the body section and provide id="display".
  2. Create a button (to find the location).
  3. Then create a script. In the script, we create a function, getmylocation() that will be called when a user clicks on the button (onclick="getmylocation()").
  4. If the Geolocation API is supported by the browser then it calls the getCurrentPosition(showPosition) method. Actually, this method can carry three  parameters (two are optional) but we are using a single parameter, in other words, the showPosition function. We will learn about another two callback functions or parameters later in this article.
image5.jpg
 
5. The getCurrentPosition's success callback (in other words showPosition) is ed with a position that contains the latitude and longitude of your location. We get the latitude and longitude of the location from the position.coords object.
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>Geolocation Example 1</title>  
  6.    </head>  
  7.    <body>  
  8.       <p id="display">Click the button to get your coordinates:</p>  
  9.       <button onclick="getmylocation()">Find my Location</button>  
  10.       <script>  
  11.          var x=document.getElementById("display");  
  12.          function getmylocation()  
  13.          {  
  14.          if (navigator.geolocation)  
  15.              {  
  16.              navigator.geolocation.getCurrentPosition(showPosition);  
  17.              }  
  18.            else  
  19.          {  
  20.          x.innerHTML="Geolocation API is not supported by this browser.";  
  21.          }  
  22.          }  
  23.          function showPosition(position)  
  24.          {  
  25.          x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;  
  26.          }  
  27.       </script>  
  28.    </body>  
  29. </html> 
Preview:
 
image6.jpg
 
On clicking the Find my location Button the user will be prompted with a dialog requesting the user's permission to share the location information.
 
image7.jpg
 
When the user permits the sharing of the location information the user gets the latitude and longitude successfully.
 
image8.jpg
 
If the user's browser does not support the Geolocation API then he will get output like this
 
image9.jpg
 
I have created a diagram for understanding the entire process easier.
 
image10.jpg
 
Example 2
 
In the above example, we learned how to get location coordinates. Suppose that the user denied sharing the location information or the browser is unable to get the location or the request times out. In this case, we need to handle the error and display the message to the user.
We need to add an error callback function, in other words, showerror in the getCurrentPosition() method. Geolocation es an error object when getting the numeric code (in other words error.code). We can also display an error message using the error.message property.
Here, we have created a var errortype in which error messages are supplied along with the error codes (0 to 3). Using error.code we display our error message (in other words errmsg).
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>Geolocation Example 2</title>  
  6.    </head>  
  7.    <body>  
  8.       <p id="display">Click the button to get your coordinates:</p>  
  9.       <button onclick="getmylocation()">Find my Location</button>  
  10.       <script>  
  11.          var x=document.getElementById("display");  
  12.          function getmylocation()  
  13.          {  
  14.          if (navigator.geolocation)  
  15.               {  
  16.              navigator.geolocation.getCurrentPosition(showPosition,showerror);  
  17.              }  
  18.            else  
  19.          {  
  20.          x.innerHTML="Geolocation API is not supported by this browser.";  
  21.          }  
  22.          }  
  23.          function showPosition(position)  
  24.          {  
  25.          x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;  
  26.          }  
  27.          function showerror(error){  
  28.          var errortype={  
  29.          0:"Unknown Error",  
  30.          1:"Permission denied by user",/*used when user denied the request*/  
  31.          2:"Position not available",/*used when browser tried, but failed to get location*/  
  32.          3:"Request time out"  
  33.          };  
  34.          var errmsg=errortype[error.code];  
  35.          var divbox=document.getElementById("display");  
  36.          divbox.innerHTML=errmsg;  
  37.          }  
  38.       </script>  
  39.    </body>  
  40. </html> 
image11.jpg
 
In the getCurrentPosition() method, the last function(optn) sets the timelimit (in other words timeout), Accuracy and so on.
  1. if (navigator.geolocation) {  
  2.     var optn = {  
  3.         timeout: infinity,  
  4.         enableHighAccuracy: true,  
  5.     };  
  6.     navigator.geolocation.getCurrentPosition(showPosition, showerror, optn);  
  7. } 
Here, timeout is in milliseconds and its default value is Infinity and enableHighAccuracy gets an accurate position. If false is used for enableHighAccuracy then a less accurate position is obtained (default value is false).
 
That's all. I hope you like it.
 
Thanks


Similar Articles