Detect Geolocation On Web Browser Using HTML5

HTML5 is been a part of many of my projects and once again I want to share a pretty interesting usage of HTML5 to detect geolocation of the user from the web browser. Currently most of the web browser support HTML5 except the lame Internet Explorer and this geolocation detection works fine with Firefox, Opera, Chrome and Safari. If you have an iPhone, you can see the thing happening in it. The geolocation feature user Google maps along with the javascript object – navigator.geolocation and HTML5. This is not a pure HTML5 source, but its good to have these here.

How does this work? For the web browsers, the script takes the position of latitude and longitude based upon your IP address. And for a Mobile devices, it takes advantage of the GPS. So on web browser your location may be incorrect, since its based on your IP address.

detect geo location using HTML5

Here is the example script from the developer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Bloggermint Demo - HTML5 Geolocation</title>
<link rel="stylesheet" href="http://bloggermint.com/demos/html5geo/files/html5geo.css" type="text/css" />
<script src="http://bloggermint.com/demos/html5geo/files/h5utils.js"></script></head>
<body>
<section id="wrapper">
    <header>
      <h1>Geolocation</h1><a href="http://bloggermint.com">(back to post)</a>
	  </header><meta name="viewport" content="width=620" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <article>
      <p>Finding your location: <span id="status">checking...</span></p>
    </article>
<script>
function success(position) {
  var s = document.querySelector('#status');

  if (s.className == 'success') {
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
    return;
  }

  s.innerHTML = "found you!";
  s.className = 'success';

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '560px';

  document.querySelector('article').appendChild(mapcanvas);

  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';

  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script>
</section>
<script src="http://bloggermint.com/demos/html5geo/files/prettify.packed.js"></script>
</body>
</html>

On iPhone you can get the exact user location

detect geolocation with html5The Geolocation detection using HTML5 was developed by Remy. You can find him on Twitter @remy and the source can be downloaded from here

Alternatively you can also check out this tutorial for HTML geolocation detection.

Additional Resource:

How To Create A HTML5 Contact Form

Geolocation API specification

January 7, 2011. This entry was posted in Tutorials and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

18 Responses so far!

  1. Pingback: Tweets that mention Detect Geolocation On Web Browser Using HTML5 | Bloggermint -- Topsy.com

  2. Pingback: 20 Fresh Free HTML5 And CSS3 Website Templates And Tutorials | Bloggermint

  3. awesome article nice..

  4. dont work i firefox 8.0 or opera 11.52

  5. Pingback: 15 Amazing Collection HTML5 Tutorials | Daily Syntax

  6. Pingback: 200+ HTML5 Tutorials, Techniques And Examples

  7. Pingback: 国外35个非常实用的HTML5教程分享 – 网页制作基础教程

  8. Pingback: Waves of Technology | 70 HTML5 Tutorials, Resources & Examples

  9. Pingback: 25 HTML5 CSS3 Tutorials with a Hint of jQuery

  10. Pingback: Weekly List Bookmarks (weekly) | Eccentric Eclectica @ ToddSuomela.com

  11. Sumit Mittal

    On Web browser, can I get the location without asking the user to “Allow” me to access his/her location? I am currently using IP address but it does not always return exact location

  12. Pingback: 50 Best HTML5 Tutorials 2011 | Deep Ocean, Wide Sky

  13. Pingback: Roundup: 50 Top Notch HTML5 Tutorials | Design Superstars

  14. Pingback: 40 HTML5 beginner tutorials - Tutsgeek.com

  15. Pingback: 20 Must Have HTML5 Tutorials - wWw.TutsInd.Com - All New TutorialswWw.TutsInd.Com – All New Tutorials

  16. Pingback: 40 Web Tutorial Desarrollo que hará que sus habilidades Skyrocket | Clear Data

  17. Not Working….Nice article…if u solve it please mail me …..

  18. Pingback: Top 30 HTML5 Tutorials | Web Hosting Secret Revealed

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>