Chapter 8. Geolocation

Christopher Deutsch

Marc Grabanski


The W3C Geolocation API allows for scripted access to geographical location information associated with a device’s browser. In this chapter we’ll first cover how to access this API and then dive into some examples of what you can do with this data using Google Maps and other third-party libraries like SimpleGeo.

All of the examples in this chapter use jQuery (see, which can easily be included using a script tag in one of two ways. There is no need to download the jquery.js file; your web page can use the version hosted on Google’s Content Delivery Network (CDN):

<script src="//"></script>

And, just in case a call to the file across the Internet isn’t available, a fallback to a local copy of the jQuery file can come right afterward in a second script element that checks for the previous copy’s successful inclusion:

<script src="//"></script>
<script>window.jQuery || document.write("<script

8.1. Getting Basic Geolocation Data


You want to find the location of the user’s Internet device.


Use the new HTML5 Geolocation API to get the user’s location when she clicks a button and output the values to the web page, as shown in Figure 8-1.

Figure 8-1. The latitude and longitude coordinates determined natively through the browser

Start by ...

Get HTML5 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.