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.

possible duplicate of [google maps. how to create a LatLngBounds rectangle (square) given coords of a central point](http://stackoverflow.com/questions/5715791/google-maps-how-to-create-a-latlngbounds-rectangle-square-given-coords-of-a-c) — Kate Gregory, Nov 08 '12 at 17:37

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

I believe this question includes code that should let you accomplish what you're looking for.

edited May 23 '17 at 11:43

Community

1
1

answered Nov 08 '12 at 16:33

Kelvin

5,227
1
23
36

geocodezip · Answer 2 · 2012-11-11T01:23:42.047

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

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

2 Answers2