Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Letting Your Users Find Themselves with GeoLocation

  • Print
  • + Share This
One of the new features in recent browser releases is GeoLocation API allowing access to geographical location about the browser you are using. Christopher Schmitt examines how GeoLocation works and demonstrates a JavaScript example you can code right now.
From the author of

The W3C, with the advent of HTML5, has developed a JavaScript API that allows a web browsing client—whether desktop web browser or mobile device—to determine a user’s geographical location.

GeoLocation, along with other services such as Google Maps, can allow a user to, say, find a nearby coffee shop or get turn-by-turn directions to the nearest hospital. It also integrates well with other social media applications, such as Twitter, which recently integrated GeoLocation into its micro-blogging service (as shown in Figure 1).

Figure 1 Adding where you send your messages adds more context to their meaning.

How Does GeoLocation Work?

From GPS (for GPS-enabled devices) to the less accurate cell-tower triangulation and client IP address, the GeoLocation API determines a user’s coordinates—the latitude and the longitude—through various methods available to the browser client.

What method the browser determines to pull in a user’s location depends upon the capabilities of the user’s device and also the script itself. Depending on your needs, more or less accurate methods can be specified with the API.

The ability for any website to figure out a user’s location is understandably a privacy concern, so GeoLocation is opt-in only, meaning that the user is always given the choice whether or not to reveal his location.

When a GeoLocation script is called within a site or mobile application, a notification pops up prompting the user for permission to share his location, as shown in Figure 2.

Figure 2 An alert box appears in the Safari browser asking for permission to obtain the user’s location.

Note that other browsers might handle the alert differently as shown in Figure 3. In fact, Twitter adds a message (with a red arrow even!) below the Firefox browser’s alert message, as shown in Figure 3.

Figure 3 The Firefox browser slides in a notice beneath the browser’s menu.

If the user declines, then an error is returned and the script is unable to retrieve the user’s coordinates (see Figure 4).

Figure 4 After saying no, Twitter shows a small message prompting the user to allow for GeoLocation to be turned off.

  • + Share This
  • 🔖 Save To Your Account