How to create a predefined polygon with specific size - google-maps

Question

I have a initial Lat/Lng derive from click event in google maps.
Using that Lat/Lng, I want to be able to construct a rectangle polygon that is 2km by 2km. Since I already have a lat/lng, I attempted to find SE corners of a rectangle - using computeOffset.
var initial_pos = new google.maps.LatLng(lat, lng)
var south = spherical.computeOffset(initial_pos, 2000, 135);
var east = spherical.computeOffset(initial_pos, 2000, 90);
var bounds = new google.maps.LatLngBounds(
initial_pos, south, east
);
var rectangle = new google.maps.Rectangle({
map:map,
bounds: bounds
});

Answer 1

You are right. To draw a rectangle you will need the bounds, which can be derived from two diagonally opposite vertices of the rectangle to be drawn. Let's say you have NW (NorthWest) corner and you are trying to draw a square of side s. You may then find out LatLng of the SE corner, using computeOffset, with distance as s*√2 (in meters) and heading as 135 (degrees).
Following are suggestions on the currently posted source code:
You should calculate a new position only once. Since this position is diagonally opposite, distance should be 2000*1.414. Also, note that the bounds is not initialized with LatLng. They are initialized with four variables. north and south are Lat values. east & west are Lng values. Here are my code change suggestions. Please try them. Please treat this as pseudo code and suite appropriate changes as needed.(Following code is now updated during my edit and should work. Ensure that libraries=geometry is added in the script tag, e.g.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry&callback=initGMap">
</script>)
var initial_pos = new google.maps.LatLng(18.39,77.12);
// initialize initial_pos variable based on click event or so
var calculated_pos = google.maps.geometry.spherical.computeOffset(initial_pos, 200*1.414, 135);
var rectangle = new google.maps.Rectangle({
map: map,
bounds:{
north: initial_pos.lat(),
south: calculated_pos.lat(),
west: initial_pos.lng(),
east: calculated_pos.lng()
}
});