larsklint.com Microsoft MVP, author, speaker, Azure geek

I am currently building a new web product that relies on client location to a large extent. During the development I had to learn about the geo-location API for use within HTML5 compatible browsers, and thought I’d share how simple it is to use. Article first published on gooroo.io.

The use of GPS data has become second nature for most everyday tasks. The most common scenario of finding your way from A to B using GPS is obvious, but there are a lot of other uses as well. When you ask to find the nearest store on a company website, GPS is used. When you log into Facebook in a foreign country and you subsequently get ads for all of the Swedish natural foods you can eat, GPS is used. When you ask Google to remember where you parked your car, GPS is used. And many more ways.

Using GPS in your web app is not difficult, but there are a few points to note and some pit falls to avoid. This article will show you how to use the GPS hardware on the user’s device, and then take that one step further to use Google’s Map API to reverse geo-code the result and make it some kind of useful.

navigator.geolocation

The main API to use for accessing the GPS module on the device (usually a smartphone) is navigator.geolocation. This is part of the HTML5 specification and is supported by all major browsers. Although the API is supported on all modern browsers, it is recommended to still test for the presence of the API.

In the code above, if the navigator.geolocation API is present, then we can call the getCurrentPosition method, which takes a callback function as argument to handle the result. The callback function will receive coordinates object, which can be queried to get latitude, longitude and accuracy.

[code language=”javascript”]

function callBack(pos) {
var crd = pos.coords;
​
console.log(‘Your current position is:’);
console.log(`Latitude : ${crd.latitude}`);
console.log(`Longitude: ${crd.longitude}`);
console.log(`More or less ${crd.accuracy} meters.`);
};
[/code]

This is all really straight forward and should not cause you any problems. One thing to note is you can only use navigation.geolocation over an HTTPS connection, as it had privacy implications asking users for their location.

watchPosition()

If you are interested in receiving continuously updated GPS coordinates, then you can use watchPosition() instead of getCurrentPosition(). This will return a new position every time the location of the device changes.

[code language=”javascript”]
function getLocation() {
if (navigator.geolocation) {
id = navigator.geolocation.watchPosition(callBack);
} else {
// Geolocation is not supported by this browser.
}
}
[/code]

It is used in the same way as getCurrentPosition(), and the callBack is called every time the position changes. To stop the watch function, call the clearWatch(id) function, where the id parameter is the id of the watch you set up with watchPosition().

[code language=”javascript”]
navigator.geolocation.clearWatch(id)
[/code]

Google Maps API

Now that you have the latitude and longitude of the user’s device, how can you actually use it? One of the ways to use the raw, but rather non-user friendly, GPS coordinates is through the Google Maps API.

First you need to get access to the Google Maps API, which is free and takes about 5 minutes to complete. Once you have access you need to create an API key for your current project, which authenticates you against the Google service.

Next, you add the following script tag to the bottom of your page, to load the Google Maps script for calling their API.