How to get Bounding Box coordinates for my google map window

Question

I am working on a project that includes google maps api v3 and PostGres.

What I want to do is to pass the bounding box coordinates(bottom left and top right) of my map window to POSTGRES and get the POI locations for the generated map window on a particular zoom level.

How can I achieve this.. ? Any Ideas? Is there already a direct function for this in api v3?

I've got this on SO but this does not seem to work for me

Finding the lat-long of the corners in a Google Maps window

What's wrong with 'map.getBounds()'? – Marcelo Mar 27 '13 at 08:06 — Marcelo, Mar 27 '13 at 08:06
It was my fault.. My implementation was incorrect..! – writeToBhuwan Mar 27 '13 at 19:31 — writeToBhuwan, Mar 27 '13 at 19:31

geocodezip · Accepted Answer · 2022-05-05T20:04:18.580

The question is using the Google Maps API v2, use the Google Maps API v3 equivalent google.maps.Map.getBounds().

The bounds will not be available until the bounds_changed event has fired, so wrap it in a listener for bounds_changed

google.maps.event.addListener(map, "bounds_changed", function() {
   // send the new bounds back to your server
   alert("map bounds{"+map.getBounds());
});

proof of concept fiddle

code snippet:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8,
  });
  google.maps.event.addListener(map, "bounds_changed", function() {
    // send the new bounds back to your server
    document.getElementById("bounds").innerHTML ="map bounds=" + map.getBounds();
  });
}

window.initMap = initMap;

#map {
  height: 90%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  </head>
  <body>
  <div id="bounds"></div>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

How to get Bounding Box coordinates for my google map window

1 Answers1

Linked