Book Image

Instant HTML5 Geolocation How-to

By : Benjamin Otto Werdmulle
Book Image

Instant HTML5 Geolocation How-to

By: Benjamin Otto Werdmulle

Overview of this book

We don't just surf the Web from our desktops any more – we take it with us, everywhere we go. Modern devices contain sophisticated hardware and software to determine the user's location. Apps such as Foursquare and Google Maps use this to create new kinds of functionality. Now, you can do this too with the HTML5 Geolocation API. "Instant HTML5 Geolocation How-to" is a simple guide to adding location information to your web applications. The practical, easy-to-follow recipes are designed to help you learn the ins and outs of the API. You'll learn how to use it, how it works, and how to save and display geographic information on the web. Beginning with a solid grounding in how the Geolocation API works and when to use it, you will learn how to determine, store, display, and track the user's location via a series of clear recipes. You will learn the different ways location is determined on different devices, including desktops and laptops that don't have GPS units. You'll also learn how to selectively use these different behaviours, based on the speed, accuracy, and battery life requirements of your application. You'll also get some hints about using MySQL databases to store sets of location data. "Instant HTML5 Geolocation How-to" will teach you everything you need to know about retrieving the location information your application needs, across multiple devices and platforms.
Table of Contents (7 chapters)

Understanding the Geolocation API (Simple)

At its core, the Geolocation API is a series of simple JavaScript calls that retrieve the following aspects of the user's location:

  • Latitude and longitude

  • Altitude

  • The accuracy of the latitude and longitude

  • The accuracy of the altitude information

  • Heading

  • Speed

It's worth noting that because of the aforementioned differences in technical capabilities, not all of these values are always available, even when the Geolocation API is working perfectly. For example, a laptop does not know what its altitude is. This is because it determines location in a different way, for example, to a smartphone with GPS access. These differences are discussed in the next section.

How to do it...

The web can be accessed from different types of hardware, such as desktop computers, laptops, tablets, phones, and embedded systems.


The World Wide Web Consortium (W3C) finalizes specifications in such a way that the web continues to support each of these platforms. Your operating system, Internet service provider, device type, and location all should not matter; the web is universal.

All of this means that the web may be the most important publishing medium in the history of human civilization—a medium that anyone can publish to and consume. However, because each device has slightly different capabilities, each feature may have slightly different characteristics from user to user. For example, in HTML5, some web browsers can play certain video formats, while other web browsers can play other video formats. In the Geolocation API, these changes relate to how location is computed, and as a result, how accurate it is.

Here's how the Geolocation API works from the user's perspective. You can see it in action by visiting my demo at

  1. Visit an application or website that requires location information.

  2. The application attempts to determine your location with the Geolocation API.

  3. The browser asks you whether you want to reveal the location to the application.

  4. If you consent to sharing your location, your location is determined using available hardware and software, and sent to the application.

  5. If you do not consent to sharing your location, no location information is sent to the application, and it is notified that no location information will be sent.

Your application needs the Geolocation API if:

  • You want to adjust the application's functionality based on the user's location

  • You want to adjust a site's content or redirect the user based on his/her location

  • You want to empower the user to track his/her location over time

Your application cannot use the Geolocation API if:

  • You want to track the user without his/her explicit consent

  • You need real-time, extremely accurate location information

We will discuss why in the next section.

How it works...

The request for information is an important step to protect user privacy. The Geolocation API specification explicitly states, "User Agents must not send location information to Web sites without the express permission of the user." It's sadly true that the user's location can often still be determined without his/her consent through other means, such as IP geolocation or by sharing data between applications. However, these are unrelated to the Geolocation API, and we will not be discussing them here.

Here's what a location request looks like when using Google Chrome on my MacBook Pro using a home broadband Internet connection:

Note the ribbon above the main web page content. The entire content of the page has been sent to the browser; once location information has been sent, JavaScript could change the content of the page (for example, using the jQuery framework), submit the content elsewhere using a callback, or forward the browser to another page.

Here's what it looks like in the Android Chrome browser:

You can test your browser's geolocation capabilities by visiting

Here's what it looks like when using Google Chrome on my MacBook Pro using cable Internet:

Here you can see that although my latitude and longitude have been calculated reasonably accurately, my altitude, heading, and speed details are not available. This is because these details are determined using GPS (Global Positioning System) technology, and my laptop does not have this capability. Instead, my web browser needs to guess my location based on various environmental factors.

Here's what the same Geolocation API test looks like on my Android Chrome browser on my cell phone:

You might be surprised to see that my altitude, heading, and speed information is still not present, despite having been determined on a cellphone that has hardware GPS support. In fact, this is because (if you use the default Geolocation API configuration) Chrome on Android attempts to use WiFi location first, where it's available, before resorting to the relatively battery-intensive (but more accurate) GPS location.

Here's what the test page looks like on an iPad:

Because the iPad did use GPS data to determine my location, altitude information is available. However, I wasn't moving, so there's no speed or heading information.

Only latitude, longitude, and accuracy are guaranteed to be there. The other fields are entirely dependent on the user's device, movement, and location context.

Where GPS is not available, the browser will use a process called trilateration to determine the location.


Trilateration looks at environmental factors such as available wireless networks and their relative signal strengths, proximity to cellphone towers, and current network IP address, and matches them against a remote database of environmental factors against known locations. For most browsers, this database turns out to be run by Google, but some providers use a solution from Skyhook Wireless, and there are others too. Apple maintains its own database for its products, for example, which have probably been crowdsourced from consumer iPhone and iPad usage. Database information could also have been gathered from special cars, such as those used to take photographs for Google StreetView, and other crowdsourcing techniques. It's important to note that the user's location is being sent to a third party in these instances, and that the returned location will only be as good as the service's database. How this location is determined is not part of the Geolocation API specification; all that is required for you to know is that some location information is returned.

There's more...

All modern browsers across both desktop and mobile platforms, except for Opera Mini, support the Geolocation API. Most have done so for enough time that you should be comfortable using the API in your web applications.

  • Microsoft Internet Explorer from Version 9.0 onwards (March 14, 2010)

  • Mozilla Firefox from Version 3.5 onwards (June 30, 2009)

  • Google Chrome from Version 5.0 onwards (May 25, 2010)

  • Android Browser from Version 2.1 onwards (January, 2010)

  • Apple Safari on the desktop from Version 5.1 onwards (July 20, 2011)

  • Apple Safari on iOS from Version 3.2 onwards (April 3, 2010)

  • Opera from Version 10.6 onwards (July 1, 2010)

  • BlackBerry Browser from Version 7.0 onwards (May, 2011)


It's worth noting that because Microsoft Internet Explorer 9.0 was the first version to not support Windows XP, there remains a significant enterprise userbase—Internet Explorer users with Windows XP operating systems—that cannot use applications based on the Geolocation API. At the time of writing, this represents 24 percent of all web users worldwide according to For this and a host of other reasons, including their own security, let's hope that they will upgrade soon.

The lack of Opera Mini support also means that many mobile phone users, particularly in developing nations or users with feature phones, are not able to use the Geolocation API. This situation is likely to change soon, as open source mobile operating systems such as Android and Firefox OS are gaining traction in those markets.

Further resources

Here are some relevant resources for further research: