HTML5 and Geolocation API

HTML5 comes with Geolocation API which allows user to provide their location to the web application. This is totally secure and user will always be asked for permission whether or not to provide information about their location.

The Geolocation API is provided with navigator.geolocation object of the BOM (Browser Object Model)

Current Position

To obtain the user's current location, you can call the getCurrentPosition() method of the geolocation object. It takes the success function as first parameter which setups position object in the function argument. The second parameter is an error function which setups error object in the function argument.

navigator.geolocation.getCurrentPosition(function(position) {
  
}, function(error) {
  
});

We can get the longitude and latitude from this position object as:

position.coords.latitude

position.coords.longitude

Watch Position

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the watchPosition() function, which has the same input parameters as getCurrentPosition().

var watchID = navigator.geolocation.watchPosition(function(position) {
  
});

We can use the watchid value in tandem with the clearWatch() method to stop watching the user's location.

navigator.geolocation.clearWatch(watchID);

Demo Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

</head>
<body>

<div id="geo-wrapper" width="600" height="400"></div>
<span id="geo-error"></span>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>
$(function(){
    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(show_map,show_map_error);
    }
    else
    {
        $("#geo-error").html('Your browser does not support geolocation.');
    }
});

function show_map(loc){

var lat = loc.coords.latitude;
var lon = loc.coords.longitude;

var lat_lon = new google.maps.LatLng(lat,lon);

mapholder = document.getElementById('geo-wrapper')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

var mapOptions = {
    center:lat_lon,
    zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}

var map = new google.maps.Map(document.getElementById("geo-wrapper"), mapOptions);
var marker = new google.maps.Marker({position:lat_lon, map:map, title:"You are here.!"});

}

function show_map_error(error){
    var x = document.getElementById("geo-error");
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
        }
}

</script>
</body>
</html>

You can get the below code in Github Gist also -
https://gist.github.com/satya-jugran/af36aec8672ce155ee03476bab87da6b

(Tech-novate)

Showing current location in browser using HTML5 Geolocation and Google Maps

HTML5 and Geolocation API

Current Position

Watch Position

Demo Source Code