Para medir la distancia entre dos puntos se utiliza una fórmula de distancia que deriva del teorema de Pitágoras. Para encontrar la distancia entre dos puntos (x1, y1) y (x2, y2), lo que requiere son las coordenadas de los dos puntos y aplicar la fórmula que se muestra a continuación.
Formula para obtener la distancia entre dos coordenadas de google maps. A continuación tienes el código del ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Calculate distance between two latitude longitude points google maps api</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLMa7emvhGQMK0uYYrS-9aymoEhlX-4sU"></script>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="utility.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 350px;
width: auto;
}
</style>
<script type="text/javascript">
var map;
var infoHandler;
var DistanceBearingPolyline;
var isDistanceFlag = false;
var DistBearingPolylineClickHdl = 0;
var DistBearingMapClickHdl = 0;
var InfoWindowCloseClickHdl = 0;
function initialize() {
var mapOptions = {
zoom: 11, // Set Zoom Level
center: new google.maps.LatLng(19.39812458609908, -99.1100109147653), // Set the Latitude and longitude of the location
mapTypeId: google.maps.MapTypeId.ROADMAP // Set Map Type Here ROADMAP, TERRAIN, SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), // Creating the map object to desplay
mapOptions);
/*Global mousemove event, developer has to manage the event while coding to use flags for different functionalities*/
google.maps.event.addListener(map, 'mousemove', function (event) {
// $('#divCoords').html(roundNumber(event.latLng.lat(), 5) + "," + roundNumber(event.latLng.lng(), 5));
if (isDistanceFlag) {
if (DistanceBearingPolyline != null) {
var path = DistanceBearingPolyline.getPath();
var len = path.getLength();
$('#divLength').html("<span>Length: " + DistanceBearingPolyline.inKm() + " km</span>");
if (len == 1) {
path.push(event.latLng);
} else {
path.setAt(len - 1, event.latLng);
}
}
}
});
}
</script>
</head>
<body onload="initialize();">
<form id="form1" runat="server">
<h1>Google maps distance from location to location</h1>
<a href="#" onclick="MeasureDistance();" style="font-family: Verdana; font-size: 14px;">Click here to measure distance</a>
<br />
<br />
<div id="divLength">
<span style="font-family: Verdana; font-size: 14px; color: red"><b>Distance: 0 km</b></span>
</div>
<br />
<div id="map-canvas">
</div>
</form>
</body>
</html>
