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>