Home     RSSRSS

Javascript:Check if browser supports HTML 5 Geolocation Object

January 7, 2012 by kiranbadi1991 | Filed under Browser, Development.

Geolocation Object is one of the cool features of the HTML 5.It is definitely going to make life easier for companies or sites which are predominantly in B2C category who can now make more bucks compare to other domains as they can now chalk out unique location based strategy for their customers.In addition to these domains, Geolocation can also used for various other purposes like security/tracking the missing people etc. though other techniques of tracking devices like using GPS/Cell id etc. are also as effective as Geolocation.But I guess Geolocation technique used via browsers will be one of the most cheapest ways of implementing location based strategy provided users gives the consent for tracking their locations.

However I would like to highlight here that W3C standards for some reasons have suggested implementation of  this object with caveat that information obtained via geolocation might not be fully accurate enough.Though I agree to this and consider it as fair enough suggestions given that depth and breadth of the pattern of its usage across various devices and situations varies.So in layman terms, it cannot be used legally with additional data to substantiate the proof of the location.But again benefits outweighs the risks here and that’s the reason I feel its one of the best things that has ever happened to web in recent times.

While experimenting with Geolocation Object of HTML 5, I wrote the small piece of JS code which I believe can tell us whether the browser supports Geolocation object or not.

Below is the sample HTML Empty code which loads the checkgeo javascript and dynamically creates the p element and then writes the user agent information giving the message whether the user agent supports Geolocation object or not.

The function checkgeolocationobject is part of checkgeo.js file and it needs to be present in the JS file.You can also have this function in the script tag of the HTML page.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML 5 Geolocation Check</title>
<style type="text/css">
p{
    font-family:Verdana;
    font-size:16;
    font-weight:bold;
}
</style>
<script type ="text/javascript" src="js/checkgeo.js">
</script>
</head>

<body onload="checkgeolocationobject()">

</body>
</html>
 
The Javascript piece which checks geolocation objects is as below.
function checkgeolocationobject(){
    if(window.navigator.geolocation){
        var para = document.createElement('p');
 var message = document.createTextNode("Yes we support Geolocation fully for "
 + navigator.userAgent);
        para.appendChild(message);
        document.body.appendChild(para);
        document.styleSheets[0].addRule("p", "color:blue", 0);
    }
    else {
        var para = document.createElement('p');
var message = document.createTextNode("No we do not support Geolocation fully for "
 + navigator.userAgent);
        para.appendChild(message);
        document.body.appendChild(para);
        document.styleSheets[0].addRule("p", "color:red", 0);
    }
}

 


Technorati Tags: ,
← Previous

Tags: ,

Comments are disabled