Home/ Questions/Q 1023393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T11:36:42+00:00

For some reason the getBounds() function for Google Maps v3 seems to be extending

  • 0

For some reason the getBounds() function for Google Maps v3 seems to be extending much further than what the map is actually showing. Correct me if I’m wrong, but shouldn’t it return the NE (top right corner) and SW (bottom left corner) latitude and longitude coordinates for the very corners of what’s being shown in the current view?

I’m returning search results (which are mapped by a lat and lng) that are between these coordinates and am being returned results much further outside the area returned by getBounds(). Any ideas about what could be going on here?

Just FYI, I’m getting the bounds on the map’s idle event:

google.maps.event.addListener(map, 'idle', function() {

var bounds = map.getBounds();
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();

…and using .lat() and .lng() to get the coordinates from the respective corners. Then I feed that to a SQL query that checks for results between those coordinates. Results are in the general area but can fall far outside what’s actually being shown on the map.

Any ideas are appreciated! Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Correct, the map.getBounds() will return the bounds of the viewable area, as shown in the example below. In this example, a red Polyline box is drawn using the points of map.getBounds() when the idle event fires.

    Your SQL query might not be returning the results you are looking for, and may need looked at again.

    <!DOCTYPE html>
<html>
<head>
<title>Bounds Box</title>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
      function initialize() {

        var latlng = new google.maps.LatLng(30.405865,-87.283362);
        var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
        var viewportBox;

        google.maps.event.addListener(map, 'idle', function(event) {
            var bounds = map.getBounds();

            var ne = bounds.getNorthEast();
            var sw = bounds.getSouthWest();

            var viewportPoints = [
                ne, new google.maps.LatLng(ne.lat(), sw.lng()),
                sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
            ];
            /*strokeOpacity = 0 , if don't want to show the border moving. */
            if (viewportBox) {
                viewportBox.setPath(viewportPoints);
            } else {
                viewportBox = new google.maps.Polyline({
                    path: viewportPoints,
                    strokeColor: '#FF0000',
                    strokeOpacity: 1.0,
                    strokeWeight: 4 
                });
                viewportBox.setMap(map);
            };

            var info = document.getElementById('info');
            info.innerHTML = 'NorthEast: ' + ne.lat() + '   ' + ne.lng() + 
                '<br />' + 'SouthWest: ' + sw.lat() + '   ' + sw.lng();
        });
      };
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:500px; height:500px"></div>
  <div id="info"></div>
</body>
</html>
    • 0