Geolocation - HTML5

HTML and CSS Reference

In-Depth Information

function getLatLng(callback) {

// test for presence of geolocation

if (navigator && navigator.geolocation) {

// make the request for the user's position

navigator.geolocation.getCurrentPosition(function (position) {

// success handler

callback(position.coords.latitude, position.coords.longitude);

},

function (err) {

// handle the error by passing the callback the location from MaxMind

callback(geoip_latitude(), geoip_longitude(), true);

});

} else {

// geolocation not available, so pass the callback the location from

// MaxMind

callback(geoip_latitude(), geoip_longitude(), true);

}

function error(msg) {

alert(msg);

}

Discussion

Other than the call to simplegeo.PlacesClient() to set up SimpleGeo, the code starts

off the same as the previous example.

In the click handler, we get the user's current location using the getLatLng() function

and we use the resulting latitude and longitude to call the SimpleGeo geoclient.

search() function to find the closest Starbucks to us. The geoclient.search() function

takes in latitude and longitude parameters, our query options, and a callback function.

We set the query options to a search term ( q param) of Starbucks within a 20 -kilometer

radius ( radius param), and indicate that only one result ( num param) is required.

The callback returns a features collection, which contains various information about

each search result (including latitude and longitude). In the callback, we save the

latitude, longitude, and address in variables as our starting location.

Then we make a second geoclient.search() call using the starting location as the

reference point. This time it returns two results, since the first result is still the starting

location. We store the second feature item's latitude, longitude, and address in the

ending location variables.

Now that the start and end locations are set, we can use the same Google Maps API

call as in the last example to display the driving directions between the two locations.

To finish off the example, we display the starting and ending addresses above the map.