One of the cool new features in HTML5 is Geolocation or the capability to determine where someone is. It turns out most modern browsers support the Geolocation API as you can see on CanIUse.com. Unfortunately Internet Explorer 8, the most popular version of IE at this moment, is the big exception.
The Geolocation API is very easy to use. The basic function to use is the getCurrentPosition() which is located on the geolocation object which in turn is located on the navigator object. It takes a callback for success that give you the location and a failure callback with a reason the location request failed.
1: $(function () {
2:if (Modernizr.geolocation) {
3: navigator.geolocation.getCurrentPosition(function (e) {
4:var coord = e.coords;
5: alert(coord);6: }, function(e) {
7: alert(e.message); 8: }); 9: }10:else {
11: $('<h1>').text('GeoLocation not supported').appendTo('#location');
12: } 13: });
I am using jQuery hear to execute the code when the page is loaded. I am also using Modernizr to check is the current browser supports the Geolocation API. Using Modernizr is highly recommended when you start working with HTML5 style features and need to check if the current browser supports a particular feature.
Of course just altering the user with his or her location is not very useful so lets show a map instead. Doing just that with Google maps is real easy. First make sure you load the required JavaScript API from http://maps.googleapis.com/maps/api/js?sensor=false and you can new up a Map and a LatLng object for the position and display it on the web page.
1:<!DOCTYPEhtml>
2:<htmlxmlns="http://www.w3.org/1999/xhtml">
3:<head>
4:<title>Geo Location</title>
5:<linkhref="../Content/Site.css"rel="stylesheet"type="text/css"/>
6:<scriptsrc="../Scripts/modernizr-2.0.6-development-only.js"></script>1:2:</head>3:<body>4:<div id="location"class='full-screen'>5:</div>6:<script src="../Scripts/jquery-1.6.4.js">1:</script>2:<script src="http://maps.googleapis.com/maps/api/js?sensor=false">3:</script>1:2:<script>3: $(function () {4:if (Modernizr.geolocation) {5: navigator.geolocation.getCurrentPosition(function (e) {6:var position = new google.maps.LatLng(e.coords.latitude, e.coords.longitude);7:var map = new google.maps.Map($('#location').get(0), {8: zoom: 15,9: center: position,10: mapTypeId: google.maps.MapTypeId.ROADMAP11: });12:new google.maps.Marker({13: position: position,14: map: map,15: title: 'Accurate to within ' + e.coords.accuracy + ' meters.'16: });17: });18: }19:else {20: $('<h1>').text('GeoLocation not supported').appendTo('#location');21: }22: });23:</script>
7:</body>
8:</html>
This is the complete page to render following map of my location.
So how accurate is it?
That really depends. On my laptop I am getting a position to with 100 meters of where I am, the location returned actually claims to be accurate to 87 meters. My laptop doesn’t have a GPS but I am using Wi-Fi and that results in a pretty decent location. On my phone the position is a lot better because it can actually use the GPS is needed. But on my desktop, connected through cables instead of Wi-Fi, the position is several kilometers of. So it very much depends on the device.
But my privacy
Fortunately your privacy is save. Before a browser returns your location it needs to get your permission. So no need to be afraid of websites trying to sniff your location without asking your permission first.
Enjoy!
www.TheProblemSolver.nl
www.dotnetevents.nl