Navigation

How to use HTML5 geolocation

By Sam Piggott | HTML | Dec 11, 2013

The new geolocation function in HTML5 adds the functionality to the browser necessary to detect the user’s location, generate co-ordinates, and return them as values back to the user.

Not only will it work across desktops, but across mobile and tablet devices too — which opens up huge possibilities for web developers looking to create location-based online apps!

In today’s tutorial, you’ll learn how to fetch the latitude and longitude co-ordinates using nothing more than a few lines of HTML and JavaScript. You’ll then learn how to take those co-ordinates and feed them into the Google Maps API to reverse-geocode those values and produce a live in-browser map of your current location, complete with a place marker.

Once you’ve finished the tutorial, I recommend checking out the full Google Maps API documentation to learn about some of the more extensive and exciting features it’s capable of.

 

Have you used a location service for a project? How reliable do you think geolocation is? Let us know in the comments.

Featured image/thumbnail, location image via Shutterstock.

Share this post
Comments (no login required)
  • techticsolutions

    Hey, I have been looking for this help for quite some time, for one of the web development project we are working on. Thank you for sharing this valuable information. I appreciate it.

  • http://dandigangi.me/ Dan DiGangi

    I like to throw Modernizr in for checking this feature out.

  • bhuman

    jQuery is not really needed here is it – seems like a waste of 40k of JS?

    • Sam Piggott

      I’ve just put this together without the jQuery library and can confirm you’re right – we don’t need the jQuery library in this example. When building the demo, I struggled to get the API running without it – but it’ll work fine without it. Thanks for the pointer! :)

  • Pavel 2Nine Antolík

    Thank you for that simple tutorial, gotta try that, it’s very interesting!

  • FYI Nutrition

    I really needed this coding information for a trucking company. Thank you very much!

  • flint

    I’ve been using HTML5 geolocation for my tiny weather site and it works great at gathering lat/long information – wthr.im

    • enf

      you should make a button to switch to Celsius…else wise, nice page

    • bhuman

      Think you might need an epileptic warning for that site – what’s up with the flashing?

  • http://vryhof.net/ Amos Vryhof

    function geolocate(callback) {
    if ( ‘geolocation’ in navigator ) {
    navigator.geolocation.getCurrentPosition(function (position) {
    callback( position );
    });
    } else {
    alert(“Geolocation not supported”);
    // I usually call my IP Geolocation PHP script here
    }
    }

  • Sean Ragsdale

    desktop geolocation gets wrong position almost 100% of the time, but mobile geolocation has spot on accuracy 90% of the time

    • Sam Piggott

      Hey Sean,
      I’ve actually found the geolocation to be relatively accurate no matter the device, although oddly mobile devices seem to generate a more precise location. Weird!
      Thanks for watching, hope you enjoyed the guide nonetheless!

  • http://www.aljtmedia.com/ Lewis Theobald

    Great tutorial. I’d strongly recommend anyone using Google Maps for GeoLocation to checkout the GMaps.js. It is powered off jQuery but takes your weight off needing to understand the underlying principles.

  • http://www.crea7ive.cl/ crea7ive

    Thanks for the tutorial

  • Nicolas Issalene

    They are some missing options on the getCurrentPosition, and there is no fallback.

    You can pick this class to get data:

    https://github.com/kogratteMarket/LycornPublishing/blob/master/js/src/GeolocationProvider.coffee

    In the constructor you have to provide the callback function, wich is called with this object as parameter:

    https://github.com/kogratteMarket/LycornPublishing/blob/master/js/src/Geolocation.coffee

    If geolocation isn’t available, a fallback with a remote service is used.

  • Akkis

    Quick and to the point. thank you for the tutorial!

  • http://jb-webs.com Anna

    Hey i started to learn HTML5 and this aricle is very useful…. Thank you Sam!!! I would love if someone can sent me links from other useful tutorial!!!!