Each new project I am involved with at Launch is a learning experience. I find the best technologies available and implement them to fit our clients’ needs. The latest tool I’ve added to my arsenal is for our client Chicago Maps. Chicago Maps needed a way to display their printed maps on the web. We also wanted the site to find the current location of the user’s device and let them know where featured locations are in relation to their location. We also wanted to provide walking and driving routes to the featured locations. I decided to use the geolocation object to make this happen.
The geolocation object
The geolocation API is published through the navigator.geolocation object.
If the object exists, geolocation services are available. You can test for the presence of geolocation like this:
if ("geolocation" in navigator) {
/* geolocation is available */
} else {
/* geolocation IS NOT available */
}Getting the current position
To obtain the user’s current location, you can call the getCurrentPosition() method. This initiates an asynchronous request to detect the user’s position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.
Note: By default,
getCurrentPosition()tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned togetCurrentPosition().
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});The above example will cause the do_something() function to execute when the location is obtained.
Watching the current position
If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the watchPosition() function, which has the same input parameters as getCurrentPosition(). The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for getCurrentPosition(), can be called repeatedly.
Note: You can use
watchPosition()without an initialgetCurrentPosition()call.
var watchID = navigator.geolocation.watchPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});The watchPosition() method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the clearWatch() method to stop watching the user’s location.
navigator.geolocation.clearWatch(watchID);Geolocation Live Example
HTML content
<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>JavaScript Content
function geoFindMe() {
var output = document.getElementById("out");
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
output.appendChild(img);
};
function error() {
output.innerHTML = "Unable to retrieve your location";
};
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(success, error);
}Live Result
Be sure to “allow” geolocation services for your browser.
