HTML5 Digital Classroom

Lesson 15: HTML5 Geolocation

In this lesson, you will learn to detect and display the location of your site’s users with the Geolocation API from HTML5. You can use this information to pinpoint a user’s location for a variety of reasons, such as displaying the user’s location on a map.

What you’ll learn in this lesson:

• • Understanding Geolocation API and its limitations
• • Detecting the user’s geographic location
• • Displaying the user’s location on a map
• • Utilizing fallbacks for varying devices
• • Understanding JavaScript callbacks and how to use them
• • Creating a “mash-up” geolocation application

Starting up

You will work with several files from the HTML5_15lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

To accurately preview the HTML5 content you will create in this lesson, you need a browser that supports HTML5 tags. See “Using web browsers that support HTML5 tags” in the Starting Up section of this book to determine whether you are using such a browser, or for instructions on downloading one.

Understanding Geolocation

Geolocation lets you determine a user’s position anywhere on Earth using a geographic coordinate system (latitude and longitude). To detect the user’s location, browsers and devices rely on GPS hardware, ...