My script will show the distance from you and a city. I put each city lat and long in a json but I don’t know how to loop through all those items to show me that I am closer to ny or seattle. In this mom the script shows only the distance from you and another location. I put in comments seattle and ny. I dond’t know how to bring in ourCoords from var km = computeDistance(position.coords, ourCoords);
just one value, form a nested loop that will go through json. This value will be compared with position.coords and will calculate the smallest distance from you and seattle, for example.
HMTL:
<div id="location">
Your location will go here.
</div>
<div id="distance">
Distance from Company will go here.
</div>
<div id="map">
</div>
This will go in head
JS:
window.onload = getMyLocation;
var ourCoords = {
latitude: 47.624851,
longitude: -122.52099
};
// var ourCoords = {
// "seattle": [{"latitude" : 47.624851, "longitude": -122.52099}],
// "new york": [{"latitude" : 48.624851, "longitude": -122.54099}]
// }
function getMyLocation() {
// check if the browser supports Geolocation API
if (navigator.geolocation) {
// we call the getCurrentPosition method and pass in a handler function, displayLocation
navigator.geolocation.getCurrentPosition(displayLocation, displayErrors);
} else {
alert("No geolocation support by your browser!");
}
}
// Function called when the browser has a location
// position contains the latitude and longitude of your location
function displayLocation(position) {
// grab the latitude and longitude of your location from the position object and his .coords property
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from our Company";
showMap(position.coords);
}
// Handler which is passed an error by the Geolocation API
function displayErrors(error) {
var errorTypes = {
0: "Unknown error",
1: "Permision denied by user",
2: "Position is not available... ",
3: "Request timed out"
};
// using the error.code property, we assign one of those strings(0, 1, 2, 3) to a new variable, errorMessage
var errorMessage = errorTypes[error.code];
// In the case of errors zero and two, there is sometimes additional information in the error.message property, so we add that to our errorMessage string
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + " " + error.message;
}
var div = document.getElementById("location");
// we add the message to the page to let the user know
div.innerHTML = errorMessage;
}
// This function takes two coordinates, a start coodinate and a destination coordinate, and returns the distance in kilometers between them
function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);
// radius of the Earth in km
var Radius = 6371;
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}
function degreesToRadians(degrees) {
var radians = (degrees * Math.PI)/180;
return radians;
}
var map;
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude,coords.longitude);
var mapOptions = {
zoom: 10,
center: googleLatAndLong,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
// add the user marker
var title = "Your Location";
var content = "You are here: " + coords.latitude + ", " + coords.longitude;
addMarker(map, googleLatAndLong, title, content);
}
function addMarker(map, latlong, title, content) {
var markerOptions = {
position: latlong,
map: map,
title: title,
clickable: true
};
var marker = new google.maps.Marker(markerOptions);
var infoWindowOptions = {
content: content,
position: latlong
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map);
});
}