Using Geolocation - HTML5 Foundations - page 261

var d1 = haversine(lat, lon, 40.755018, -73.992556); // 310
West 38th Street
var d2 = haversine(lat, lon, 40.791121, -73.973971); // 2450
Broadway
var d3 = haversine(lat, lon, 40.757498, -73.986654); // 200
West 44th Street
}
Now that you have all three distances, you need to update the <div> elements that you added to the Locations page
earlier.
6. Update the distance <div> for the first location by getting the element using its ID ( location1dis-
tance ) and then setting its textContent property to Distance: n miles (where n is the distance
value).
function findNearest(lat, lon) {
...
// Add text to the distance labels.
document.getElementById(“location1distance").textContent =
“Distance: “ + d1 + “ miles";
}
7. Now do the same for locations 2 and 3. Don't forget to update the IDs of the elements and variables being
used for the distance value.
function findNearest(lat, lon) {
...
// Add text to the distance labels.
document.getElementById(“location1distance").textContent =
“Distance: “ + d1 + “ miles";
document.getElementById(“location2distance").textContent =
“Distance: “ + d2 + “ miles";
document.getElementById(“location3distance").textContent =
“Distance: “ + d3 + “ miles";
}
That completes the findNearest() function for now. All that is left to do is to call this function when you
get the user's location.
8. Remove the call to the alert() function that you added in the previous code exercise. (It can be found in
the function block of your getCurrentPosition() call).
navigator.geolocation.getCurrentPosition(function(position) {
alert(“Latitude: “ + position.coords.latitude + “ “ +
“Longitude: “ + position.coords.longitude);
});
9. Add a call to the findNearest() function where your original alert() call was, passing in the latit-
ude and longitude coordinates obtained from the GeoPosition object.
navigator.geolocation.getCurrentPosition(function(position) {
// Pass the location data to the findNearest method.
findNearest(position.coords.latitude,
position.coords.longitude);
});