An intro for the HTML5 GeoLocation API. With this to work (currently) you have got to be on the Chrome dev channel which feel free to use at your own risk (!), or additionally working with Firefox 3.5 .

Step one

You can use standard object testing to determine if the browser supports GeoLocation.

<script>
    /**
    * This function is the callback which is passed the result from the .getCurrentPosition()
    * function. The pos argument can contain more information than just the latitude/longitude,
    * such as altitude, accuracy and speed information.
    *
    * @param object pos The result from the getCurrentPosition() call
    */
    function myCallback(pos)
    {
        var myLatitude  = pos.latitude;
        var myLongitude = pos.longitude;
    }

    /**
    * Test for GeoLocation support and make the call
    */
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(myCallback);
    } else {
        alert("Sorry, your browser doesn't appear to support GeoLocation");
    }

</script>

Step two

Once you have tested for it, we can then retrieve the position using the getCurrentPosition() method. You pass this method a callback function which you define. This callback function is given an object (if successful), with various properties:

• latitude
• longitude
• altitude (optional)
• accuracy
• altitudeAccuracy (optional)
• heading (optional)
• speed (optional)
• timestamp

How does it work?

The GeoLocation API works by retrieving geographical information associated with Internet hardware. From the specification:

“Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device’s actual location.”

Related links

• The W3C GeoLocation specification