The Geolocation API is one of the most exciting features of the new web standard. It is a relatively simple API websites can use to pinpoint their user’s exact location. You can use this feature to give your users useful location specific information, such as businesses of interest nearby or location of friends through social media.
-> See live example Here
It is important to note that this is an opt-in feature. The user must agree to share their location. Websites cannot use this feature to secretly grab their user’s location. We will see more about how the API works in the tutorial below.
It has three methods
In this tutorial we will look at the primary method used for location detection, the getCurrentPosition() method.
On its own the method does not return the user’s position. This is because the actual position information comes from another object with two properties, coords and timestamp. The coords is what we will use to get the exact location. It has several properties as listed below.
coords.latitude The value is retuned in degrees
coords.longitude The value is returned in degrees
coords.altitutde The value is returned in meters
coords.accuracy The value is returned in meters
coords.altitudeAccuracy The value is returned in meters
coords.heading The value is returned in degrees measured from true north
coords.speed The value is returned in meters/second
Let’s start working on our script. The simplest form of the script is
As mentioned earlier this does not give you access to the user’s position. All it does is prompt the user to share their location. The browser will pop-up an info-bar, typically on top of the page. The user can instruct the browser how they would like the browser to handle such request by adjusting their settings.
Here is what the info-bar looks like in Opera browser
Here is what it looks like in the Fire Fox browser
Here is what it looks like in Chrome
Now let us write a script that actually returns the users position. First let us write theHTML. Here it is.
<h1> Where are you located? </h1>
<p>Your Latitude is: <b id= "Coord1" style= "color:blue;"> </b></p>
<p>Your Longitude is: <b id= "Coord2" style= "color:blue;"> </b> </p>
As you can see, the we have set up two <b> tags with the ids Coord1 and Coord2. The script will use the ids to write the location once the user agrees to share their location.
Here is our script
//Requests position and calls the show_position function when the user agrees to share location.
//This function does the work of getting the actual user coordinates
var lat = position.coords.latitude; //This gets the user’s latitude information
var longi = position.coords.longitude; //This gets the user’s longitude information
document.getElementById("Coord1").innerHTML=lat; //This writes the latitude information
document.getElementById("Coord2").innerHTML=longi; //This writes the longitude information
Here is our little geolocation API looks like the opera browser before the user agrees to share their location.
Here is what the page looks like when the user agrees to share their location.
-> See live example Here