Question

10

How to calculate the latlng of a point a certain distance away from another?

rated 0 times [ 14] [ 4] / answers: 1 / hits: 54523 / 14 Years ago, wed, april 14, 2010, 12:00:00

To draw a circle on map I have a center GLatLng (A) and a radius (r) in meters.

Here's a diagram:

           -----------

        --/           --

      -/                 -

     /                     

    /                       

   /                   r     

   |            *-------------*

                A           / B

                           /

                          /

      -                 /-

        --           /--

           -----------

How to calculate the GLatLng at position B? Assuming that r is parallel to the equator.

Getting the radius when A and B is given is trivial using the GLatLng.distanceFrom() method - but doing it the other way around not so. Seems that I need to do some heavier math.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

answered 14 Years ago byrondonavanc · Accepted Answer

We will need a method that returns the destination point when given a bearing and the distance travelled from a source point. Luckily, there is a very good JavaScript implementation by Chris Veness at Calculate distance, bearing and more between Latitude/Longitude points.

The following has been adapted to work with the google.maps.LatLng class:

Number.prototype.toRad = function() {

   return this * Math.PI / 180;

}



Number.prototype.toDeg = function() {

   return this * 180 / Math.PI;

}



google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {

   dist = dist / 6371;  

   brng = brng.toRad();  



   var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();



   var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + 

                        Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));



   var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *

                                Math.cos(lat1), 

                                Math.cos(dist) - Math.sin(lat1) *

                                Math.sin(lat2));



   if (isNaN(lat2) || isNaN(lon2)) return null;



   return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());

}

You would simply use it as follows:

var pointA = new google.maps.LatLng(25.48, -71.26); 

var radiusInKm = 10;



var pointB = pointA.destinationPoint(90, radiusInKm);

Here is a complete example using Google Maps API v3:

<!DOCTYPE html>

<html> 

<head> 

   <meta http-equiv=content-type content=text/html; charset=UTF-8/> 

   <title>Google Maps Geometry</title> 

   <script src=http://maps.google.com/maps/api/js?sensor=false 

           type=text/javascript></script> 

</head> 

<body> 

   <div id=map style=width: 400px; height: 300px></div> 



   <script type=text/javascript> 

      Number.prototype.toRad = function() {

         return this * Math.PI / 180;

      }



      Number.prototype.toDeg = function() {

         return this * 180 / Math.PI;

      }



      google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {

         dist = dist / 6371;  

         brng = brng.toRad();  



         var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();



         var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + 

                              Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));



         var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *

                                      Math.cos(lat1), 

                                      Math.cos(dist) - Math.sin(lat1) *

                                      Math.sin(lat2));



         if (isNaN(lat2) || isNaN(lon2)) return null;



         return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());

      }



      var pointA = new google.maps.LatLng(40.70, -74.00);   // Circle center

      var radius = 10;                                      // 10km



      var mapOpt = { 

         mapTypeId: google.maps.MapTypeId.TERRAIN,

         center: pointA,

         zoom: 10

      };



      var map = new google.maps.Map(document.getElementById(map), mapOpt);



      // Draw the circle

      new google.maps.Circle({

         center: pointA,

         radius: radius * 1000,       // Convert to meters

         fillColor: '#FF0000',

         fillOpacity: 0.2,

         map: map

      });



      // Show marker at circle center

      new google.maps.Marker({

         position: pointA,

         map: map

      });



      // Show marker at destination point

      new google.maps.Marker({

         position: pointA.destinationPoint(90, radius),

         map: map

      });

   </script> 

</body> 

</html>

Screenshot:

Google

UPDATE:

In reply to Paul's comment below, this is what happens when the circle wraps around one of the poles.

Plotting pointA near the north pole, with a radius of 1,000km:

  var pointA = new google.maps.LatLng(85, 0);   // Close to north pole

  var radius = 1000;                            // 1000km

Screenshot for pointA.destinationPoint(90, radius):

Close