Wrapping latitude and longitude points with a 20m by 20m box (Google Maps API V3)

Question

I am having a hard time trying to figure out how to wrap a Lat/Lng point with a rectangle that is 20meters by 20meters.

Use-case:

> Click on a marker on the Google map
< Infowindow opens
> Click a button called 'Wrap' on the Infowindow
< Automatically create a 20x20m box with the marker dead center

I have no issue creating the rectangle (square rather) on the map I just need to know how to compute the border of the square in Lat/Lng.

On a normal grid I would get the NW and SE points by:

marker_nw_y = marker_y + 10 (meters)
marker_nw_x = marker_x - 10
marker_se_y = marker_y - 10
marker_se_x = marker_x + 10

From there I could create the graphic square etc.. But with Lat/Lng it gets more complicated because changing the degree between two points is different depending on where you are.

How could I do this? Manipulating the Haversine formula? Instead of solving for 'distance' I would need to rearrange and solve for one of the coordinates, but rearranging that formula is difficult and im not sure whether my results are even right.

Answer 1

我相信这个问题包括一些代码， 这些代码应该可以让您完成所需的工作。

Answer 2

I would use Mike Williams' eshapes library which I ported to the Google Maps API v3 to make squares with a "radius" of 20*sqrt(2)/2 meters.

example using my port of Mike Williams' eshapes library

The click listener would be:

google.maps.event.addListener(map, "click", function(evt) {
  var marker = new google.maps.Marker({ position: evt.latLng, map: map});
  var square = google.maps.Polyline.RegularPoly(evt.latLng,20*Math.sqrt(2)/2,4,0,"#ff0000",1,1);
  square.setMap(map);
});

working example

Simpler working example based off alternate answer in link from Kelvin Mackay