How do I calculate the new position (latitude and longitude) after increment x meters from position1 to position2?

Question

By Example: I have two positions, position1(-33.50694, -70.72127) have 32 meters of distance to position2(-33.50684, -70.72111), I need calculate new position after increment 1 meters to position1. What would be the new position with respect to position 2?

Answer 1

To calculate a position 1 meter from position1 along a direct line to position2, you can use the geometry library functions:

• computeHeading(from:LatLng, to:LatLng)

  Return Value: number
  Returns the heading from one LatLng to another LatLng. Headings are expressed in degrees clockwise from North within the range [-180,180).

• computeOffset(from:LatLng, distance:number, heading:number, radius?:number)

  Return Value: LatLng
  Returns the LatLng resulting from moving a distance from an origin in the specified heading (expressed in degrees clockwise from north).

 var new_position = google.maps.geometry.spherical.computeOffset(position2, 
     1, /* distance in meters */
     /* heading */
     google.maps.geometry.spherical.computeHeading(position2, position1));

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"));
  var position1 = new google.maps.LatLng(-33.50694, -70.72127);
  // have 32 meters of distance to 
  var position2 = new google.maps.LatLng(-33.50684, -70.72111);
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(position1);
  bounds.extend(position2);
  map.fitBounds(bounds);
  var marker1 = new google.maps.Marker({
    position: position1,
    map: map,
    title: "1",
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  });
  var marker2 = new google.maps.Marker({
    position: position2,
    map: map,
    title: "2",
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  });
  console.log("distance=" + google.maps.geometry.spherical.computeDistanceBetween(position1, position2).toFixed(2) + " meters");
  var marker1meter = new google.maps.Marker({
    position: google.maps.geometry.spherical.computeOffset(position2, 1, google.maps.geometry.spherical.computeHeading(position2, position1)),
    map: map,
    title: "1 meter",
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  })

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>