Question

110

How to get Bounding Box coordinates for my google map window

rated 0 times [ 112] [ 2] / answers: 1 / hits: 42035 / 11 Years ago, wed, march 27, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaitlynd

Add To Favorites

Follow

Total Points: 470

Total Questions: 108

Total Answers: 120

Location: Faroe Islands

Member since Thu, Apr 8, 2021

3 Years ago

answered 11 Years ago mira · Accepted Answer

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>