HTML and CSS Reference
10. Save the geolocation.js file.
Load the Locations page in your web browser. You now should see some text displayed below the opening hours for
each location, as shown in Figure 13-4. This tells the user how far away the restaurant is. Remember: This will work
only if you are using a local development server. If you aren't, you will not see any distance labels (but nothing will
look broken either, which is always good).
Map data 2012 © Google
Figure 13-4 The Locations page with distance labels.
Finding the Nearest Restaurant
In this section, you are going to write an algorithm that can find the restaurant location that is nearest to the user. You
will then apply a class to the relevant location <section> element that will cause the element to be styled slightly
different than the others, highlighting the location nearest to the user.