Geolocation API

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.

As with other APIs, the geolocation API is implemented using JavaScript. In fact geolcation is a new property that is added to the existing DOM browser object navigator.

navigator.geolocation

It has three methods

getCurrentPosition()

watchPosition()

clearWatch()

 

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

navigator.geolocation.getCurrentPosition()

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

<script>

//Requests position and calls the show_position function when the user agrees to share location.

navigator.geolocation.getCurrentPosition(show_position);

 

//This function does the work of getting the actual user coordinates

function show_position(position){

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

}

</script>

 

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