How do I get the latitude and longitude of a rectangle if I know the center and top left GPS positions?

Question

Background:

I'm trying to use a Google maps ground overlay but we are missing GPS positions.

We have a map to overlay that was drawn over a Google Maps screenshot. From this screenshot we recorded the Top Left and Center Center position.

We require the bottom right position to accurately overlay these images. See below:

The intial thinking is finding the difference between the two points and adding that onto the center point.

Attempted logic:

In JavaScript:

var topLeft      = [-32.8830055, 151.686214];
var centerCenter = [-32.9293803, 151.756686];

var difference1 = centerCenter[0] - ( (topLeft[0] - centerCenter[0] ) ) ;
var difference2 = centerCenter[1] - ( (topLeft[1] - centerCenter[1] ) ) ;

// being bottom right this should be "bigger" than above values
// outputs [-32.97575509999999, 151.827158];
var bottomRight  = [difference1 , difference2];

Problem:

However it appears this is where the curve of the earth throws that simple maths out the door. I'm guessing that what is happening below is why.

So given I have a rectangle overlay and I know the top left point and the center point can I work out the latitude and longitude of the bottom right point I.e X in the above diagram. Note I do not know the real world distances of this rectangle.

Note: I also know that I will have to change these to NW / SE to use ground overlays.

Answer 1

Approach(using the geometry-library):

1. calculate the heading from northwest to center

   google.maps.geometry.spherical.computeHeading(northwest, center);
   

2. calculate the distance from northwest to center

   google.maps.geometry.spherical.computeDistanceBetween(northwest, center);
   

3. calculate southeast by using

   google.maps.geometry.spherical.computeOffset(center,
                                                calculatedDistance,
                                                calculatedHeading);
   

function initialize() {

  var nw = new google.maps.LatLng(62.400471, -150.287132),
    center = new google.maps.LatLng(62.341145, -150.14637),
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 9,
      center: center
    }),
    heading, distance, se;

  heading = google.maps.geometry.spherical.computeHeading(nw, center);
  distance = google.maps.geometry.spherical.computeDistanceBetween(nw, center);
  se = google.maps.geometry.spherical.computeOffset(center, distance, heading);

  new google.maps.Marker({
    map: map,
    position: center
  });
  new google.maps.Marker({
    map: map,
    position: nw
  });
  new google.maps.Marker({
    map: map,
    position: se
  });

  new google.maps.GroundOverlay(
    'https://developers.google.com/maps/documentation/' +
    'javascript/examples/full/images/talkeetna.png', {
      north: nw.lat(),
      south: se.lat(),
      west: nw.lng(),
      east: se.lng()
    }, {
      map: map
    });


}

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

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

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

Answer 2

Are you averse to using a library that already has support for Haversine calculation of center points? (With tests to boot)

Check out Geolib: https://github.com/manuelbieh/Geolib

var center = geolib.getCenter([
    {latitude: 52.516272, longitude: 13.377722},
    {latitude: 51.515, longitude: 7.453619},
    {latitude: 51.503333, longitude: -0.119722}
]);

console.log(center);

// Output:
//
// {
//     "latitude": "52.009802",
//     "longitude": "6.629000",
//     "distance": 932.209
// }

A codepen demo you can play with: http://codepen.io/anon/pen/grbGrz/?editors=1010

You can always pare it down to just the function you need.