Home / Questions / 146892
Accepted
userStack
Asked: 2020-03-17 08:52:29 +0800 CST 2020-03-17 08:52:29 +0800 CST

get distance based on latitude and longitude

  • 772

I need to get the distance between two points, according to the formula is

enter image description here

but the data provided by google maps is lat, log and I need the distance in meters

var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(41.38, 2.18);
  var myLatlng2 = new google.maps.LatLng(41.35, 2.18);

  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  var marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng,
    map: map,
    title: "Your location"
  });
  var marker2 = new google.maps.Marker({
    draggable: true,
    position: myLatlng2,
    map: map,
    title: "Your location"
  });

  google.maps.event.addListener(map, 'click', function(event) {

    alert(event.latLng);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

javascript

2 Answers

  1. To obtain the distance between two points with latitude and longitude, use the Haversine formula that translated into javascript is as follows.

    function getDistanciaMetros(lat1,lon1,lat2,lon2)
{
  rad = function(x) {return x*Math.PI/180;}
  var R = 6378.137; //Radio de la tierra en km 
  var dLat = rad( lat2 - lat1 );
  var dLong = rad( lon2 - lon1 );
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(lat1)) * 
  Math.cos(rad(lat2)) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

  //aquí obtienes la distancia en metros por la conversion 1Km =1000m
  var d = R * c * 1000; 
  return d ; 
}
    • 3
  2. Best Answer

    GMaps3offers under library geometrythe utility google.maps.geometry.sphericalwhich contains:

    Utility functions for calculating angles, distances, and geodesic areas. The default radius is the radius of the Earth of 6378137 meters.

    To include it you can do it through:

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>

    Then you can use google.maps.geometry.spherical.computeDistanceBetweenwhich:

    Returns the distance, in meters, between two LatLngs. Optionally, you can specify a custom radius. The default radius is the radius of the Earth.

    So:

    var distance = google.maps.geometry.spherical.computeDistanceBetween(myLatlng, myLatlng2);
// distancees un valor en metros
console.log((distance/ 1000) + 'Kms');

    Example:

    var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(41.38, 2.18);
  var myLatlng2 = new google.maps.LatLng(41.35, 2.18);

  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  var marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng,
    map: map,
    title: "Your location"
  });
  var marker2 = new google.maps.Marker({
    draggable: true,
    position: myLatlng2,
    map: map,
    title: "Your location"
  });

  google.maps.event.addListener(map, 'click', function(event) {
    alert(event.latLng);
  });

  // AQUI calculo de distancia entre los puntos
  var distance = google.maps.geometry.spherical.computeDistanceBetween(myLatlng, myLatlng2);
  // distancees un valor en metros
  console.log((distance/ 1000) + 'Kms');
}

google.maps.event.addDomListener(window, 'load', initialize);
    html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

    • 1