How to find the boundary coordinates of a google map by using center coordinates, width and height

Question

Say I have a center coordinate (1.22222, 2.3333) and width 25 km and height 12 km. From this I want to find the boundary points with specified center

Answer 1

On option is to use the geometry library computeOffset method.

var height = 12000; // m
var width = 25000; // m
var center = new google.maps.LatLng(1.22222, 2.3333);
var bounds = new google.maps.LatLngBounds();
var top = google.maps.geometry.spherical.computeOffset(center, height / 2, 0);
var bottom = google.maps.geometry.spherical.computeOffset(center, height / 2, 180);
var left = google.maps.geometry.spherical.computeOffset(center, width / 2, -90);
var right = google.maps.geometry.spherical.computeOffset(center, width / 2, 90);
bounds.extend(top);
bounds.extend(left);
bounds.extend(bottom);
bounds.extend(right);

proof of concept fiddle

code snippet:

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

<div id="map"></div>
<script>
  function initMap() {
    var height = 12000; // m
    var width = 25000; // m
    var center = new google.maps.LatLng(1.22222, 2.3333);
    var bounds = new google.maps.LatLngBounds();
    var top = google.maps.geometry.spherical.computeOffset(center, height / 2, 0);
    var bottom = google.maps.geometry.spherical.computeOffset(center, height / 2, 180);
    var left = google.maps.geometry.spherical.computeOffset(center, width / 2, -90);
    var right = google.maps.geometry.spherical.computeOffset(center, width / 2, 90);
    bounds.extend(top);
    bounds.extend(left);
    bounds.extend(bottom);
    bounds.extend(right);
    var map = new google.maps.Map(document.getElementById('map'), {
      center: center,
      zoom: 2,
      mapTypeId: 'terrain'
    });
    var centerMarker = new google.maps.Marker({
      map: map,
      position: center
    })
    var rect = new google.maps.Rectangle({
      map: map,
      bounds: bounds
    });
    map.fitBounds(bounds);
  }
</script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key= 
AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>