I've just been having a quick play with the new HTML5 geolocation API - you can see the results and also determine your location on a Google Map at http://www.tai-dev.co.uk/experiments/geolocation/ (although you will need a browser that supports the new HTML5 geolocation API, such as FF3.5)

I don't know about your location, but mine was pinpointed with an almost spooky level of accuracy (considering my work PC does not have GPS built in... :) )

Determining your current location is ridulously easy, and you simply use the navigator.geolocation methods

navigator.geolocation.getCurrentPosition(showMap); //where showMap is the function called if the location is successfully determined.

There are several other methods of interest that are defined in the W3C geolocation spec - I'll let you have a look here - and you can do cool things such as constantly monitor the current location (great if you're on the move)

You'll also need to consult the spec to see what data is passed into the callback function after the location has been determined, but I have included the barebones code below to allow you to plot your current location on a Google map (have a look at this code in action on my experiment page)

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=_your_key_" type="text/javascript"></script>
<script type="text/javascript">
var map;

function initialize(){
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(53.500, -4.00), 4);
map.setUIToDefault();
}
}

function findLoc(){
if (!navigator.geolocation) {
alert('Sorry, your browser does not support Geo Services');
}
else {
// Get the current location   
navigator.geolocation.getCurrentPosition(showMap);
return false;
}
}

function showMap(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;

alert('You appear to be located at (' + lat + ', ' + lon + ') (lat,lng)');

var myPoint = new GLatLng(lat, lon);
map.setCenter(myPoint, 15);

var yourCurrPoint = new GMarker(myPoint);
map.addOverlay(yourCurrPoint);
return false;

}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
...
<form>
<input type="button" value="Find Me!" onclick="findLoc()" />           
</form>
<div id="map_canvas" style="width: 500px; height: 300px">
</div>
</body>
</html>

 

How does it work?

The W3C provide the interface/specification for the service, and it's up to individual browser vendor to implement the specs. Apparently the browser determines the current location through information such as nearby WiFi signals, but the exact method is still a bit of a mystery. You can read more about this in a recent Google Blog Post announcing Google's support for the service (including of course, Chrome and Gears support)

Daniel

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Daniel Bryant (Director) | Tai-Dev Ltd www.tai-dev.co.uk - IT Consultancy Services Specialising in JEE, Web 2.0 and RDBMS