ansaurus

Question

Google Maps v3 getBounds is extending beyond what is visible on the map

Answer 1

+1 A:

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"&gt;
</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
            ];

            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>

Eric C 2010-08-21 10:46:19

Yup, it was actually a different bug with the markers that was getting me mixed up. Good demo for showing the bounds, thanks.

Ryan 2010-08-21 20:11:49

+1 Good answer @Eric :)

Daniel Vassallo 2010-08-22 03:05:34

ansaurus

tags:

views:

answers:

Google Maps v3 getBounds is extending beyond what is visible on the map

related questions