HTML and CSS Reference
In-Depth Information
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.
Setting Up Your JavaScript Files
Before you can dive into writing code that interacts with the GeoLocation API, you first need to add two new
JavaScript files to your project. The first of these contains a small JavaScript library to help you out when calculating
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
the JavaScript files. Make sure that the geo.js file is first.
<script src="js/geo.js"></script>
<script src="js/geolocation.js"></script>
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
Search WWH ::

Custom Search