HTML5 Geolocation

Code download available at the bottom of the post

In this tutorial we will use Jquery,Goople Api and HTML5 to capture geolocation
Browser used:Google Chrome

Step 1:

Include the Jquery and Goople maps API as shown below

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Step 2:

Add a place holder for the Map

<div id="map"> </div>

Using HTML5 feature we will display the latitude and longitude, so add placeholders for latitude and longitude.

 <div id="lat"></div>
<div id="long"></div>

Step 3:

 Start writing code to capture the Geolocation

<script>
//using navigator (Html 5 feature) to get the Geolocation
x = navigator.geolocation;
x.getCurrentPosition(sucess,failure);

'getCurrentPosition' method has 2 argument, one when the function success and other for failure

If the browser supports HTML5 success method is invoked else the failure method is invoked.
In the failure method we will show a warning message to user as shown below..

function failure()
{
        //Using Jquery we will display the warning message in the lat DIV element.
$('#lat').html("<p>It din't work, co-ordinated not available</p>")
}

Step 4:

We will implement the Success method to display the Geolocation

We use the position variable in the success method to get the latitude and longitude
//Fetch the co-ordinates 
var mylat=position.coords.latitude;
var mylong = position.coords.longitude;
//Display the co-ordinates in the mylat and mylong DIV elements respectively
$('#lat').html(mylat)
$('#long').html(mylong)

Open up Google chrome, you will see the longitude and latitude if successful or the error message in case of unsupported browsers.

Step 5:

Now using the google API we will display the map

//Declare the coords variable to hold the co-ordinates
var coords = new google.maps.LatLng(mylat,mylong);

//Setting up our Google Map
We are going to specify three different parameters
i. Zoom,
ii.Co-ordinates
iii.Type of map (In this case we will define a road map)

var mapOptions = {zoom:16,
center:coords,

mapTypeId:google.maps.MapTypeId.ROADMAP}

//Creating a map
We will feed in 2 arguments, one the element which we want to override and fill our Map div element
Argument 1: document.getElementById("map") //get the div map element
Argument 2: Map settings which we defined earlier

var map=new google.maps.Map(document.getElementById("map"),mapOptions);

Step 6: 

Add some styles to the div element to view the map properly

<style type="text/css">
#map
{
height: 400px;width: 400px;

}
</style>

Step 7:

Add marker to specify the exact location

 //Create a marker
           var marker = new google.maps.Marker({ map: map, position: coords });





Save and open the page in Google Chrome

Note: Please change the browser setting to allow the application to access the geolocations
Browser Setting -> Advance Settings -> Privacy Settings -> Content settings -> Location ........

Download Code