HTML and CSS Reference
Getting the User's Location
The GeoLocation API is remarkably simple to use. Browsers that support geolocation expose a geoloca-
tion interface that has a number of methods (kind of like how you call getElementById() on the document
The main method that you will be using in this chapter is getCurrentPosition() . This will return a GeoPos-
ition object that has a number of properties, including coords . The coords property contains data such as the
latitude and longitude of the user's position. Later in this chapter, you will be using these latitude and longit-
ude coordinates to calculate the distance between the user and each of the Joe's Pizza restaurants. Then you will
write some code that compares the results to find the closest restaurant.
Before you can dive into writing code that interacts with the GeoLocation API, you first need to add two new
distances; the second file is where you will place all of the code you are going to write.
The code for this exercise can be found in the download files for Chapter 13, folder 1.
Here are the steps:
1. Download the geo.js file from the book's website and place it in the js folder within your project direct-
ory. The geo.js file can be found in the following folder: chapter13/1/js .
2. Create a new file in your js folder and call it geolocation.js .
3. Open the locations.html file in your text editor.
4. Add the following two new <script> elements just before the end tag for the <body> , one for each of
5. Save the locations.html file.
Requesting the User's Location
Now you have the admin stuff out of the way, and it's time to start working with the GeoLocation API. In this sec-
tion, you learn how to request the user's location.
First you need to write some code that detects whether the user's browser supports the GeoLocation API. To do this,
you use an if statement that checks whether the geolocation interface is available. This is how the code would