My current task involves calculating the distance in kilometers between two sets of latitude and longitude coordinates, with the goal of displaying this distance in a label or paragraph on a webpage.
- I have an address from which I can determine the
lat1andlon1values successfully. - To find the
lat2andlon2coordinates for my current location, I am also able to accomplish this step.
Once I have obtained the values for lat1, lon1, lat2, and lon2, my next objective is to calculate the distance between these pairs of coordinates. However, upon executing my code snippet below, the calculated distance is displayed as NaN when alerted. I am uncertain about the issue at hand and would appreciate guidance on correcting it. Moreover, I would like to confirm if my approach is correct for this purpose.
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
#map_div{
width:400px;
height:400px;
margin: 0 auto;
}
#outer {
width:400px;
height:50px;
margin:0 auto;
text-align:center;
}
#outer input[type="text"] {
display: block;
margin: 0 auto;
}
</style>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="outer">
<p id="distance_text">this is 201 km away from</p>
<input type="text" name="location" value="Current Location"><br>
<div id="map_div"></div>
</div>
...
</html>
The existing placeholder showing "201 km" needs to be replaced with the actual calculated distance value. You can access the code on this jsfiddle link.