Získání aktuální pozice uživatele je pro moderní webovou stránku základní předpoklad nabídnutí relevantních informací – ať už se jedná o zobrazení nejbližší kamenné prodejny nebo vypsání uživatelů z dané lokality (např. u internetové seznamky).

Stačí požádat

První, co musíte udělat, je ověřit, že daný prohlížeč poskytuje geolokační API. Pokud ho nenajdete, máte smůlu. Překvapivě ale většina současných prohlížečů ho poskytuje, desktopové nevyjímaje.

if (!navigator.geolocation) {
    document.write('Sorry, your browser does '
                 + 'not support geolocation.');
}

Následně již můžete přímo požádat o pozici. Jelikož ale uživatel bude muset nejprve potvrdit, že svoji pozici sdílet chce, je potřeba to provést pomocí callbacku.

navigator.geolocation.getCurrentPosition(
    getPosition, noPosition
);

Funkce getPosition() a noPosition() nadefinujeme záhy:

/**
  * Handle geolocation errors
  *
  * @param {Object} error
  */
noPosition = function(error) {
    var x = document.getElementById('position');
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "<b>You do not want to share your location? Suit yourself.</b>";
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "<b>It was not possible to get your current location. Please check your geolocation service.</b>";
            break;
        case error.TIMEOUT:
            x.innerHTML = "<b>Hey, did you notice your browser was asking you to share your location?</b>";
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
        }
}

Ve funkci noPosition() nás bude nejčastěji zajímat případ DENIED, který znamená, že uživatel poskytnutí polohy (trvale) zamítl. K ostatním případům se nemusí kód vůbec dostat (prohlížeč prostě žádný handler nevyvolá).

/**
 * Get current location
 * @param  {Object} Current position
 */
getPosition = function(pos) {
    document.getElementById('position')
        .innerHTML = 'Your current position: '
            + (0 > pos.coords.latitude
                    ? 'S' : 'N')
            + pos.coords.latitude + '° '
            + (0 > pos.coords.longitude
                    ? 'W' : 'E')
            + pos.coords.longitude + '°'

            + '<br><a href="http://www.google.com/maps/place/' + pos.coords.latitude + '+' + pos.coords.longitude + '">Show these coordinates on Google maps</a>'

            + "<br>It's somewhere around here: <br><img src='http://maps.googleapis.com/maps/api/staticmap?center=" + pos.coords.latitude + "," + pos.coords.longitude + "&zoom=14&size=400x300&sensor=false'>"
    ; //innerHTML
};

Ve funkci getPosition() přímo dostaneme pozici uživatele v parametru. Kromě pozice (latitude a longtitude) můžeme ještě přečíst přesnost v metrech (accuracy), nadmořskou výšku (altitude) i s přesností (altitudeAccuracy) v metrech a dokonce i směr natočení (heading – na zařízeních s kompasem) a rychlost pohybu (speed – zatím jsem ale netestovat, jak funguje).

Pozor na to, že údaje mohou obsahovat nulu nebo NaN, pokud je dané zařízení není schopno zjistit!

V příkladu je ještě vidět, jak jednoduše z koordinátů získat odkaz na Google mapy (stačí souřadnice spojit pomocí znaku ‚+‘ a odeslat na google.com/maps/place/) a nebo přímo obrázek okolí (pomocí veřejného Google Maps API).

Celou stránku si můžete prohlédnout a vyzkoušet v demu.