Google Maps bounds on minimal zoom

Question

I have a simple Google Map that fill the whole page. Here is a sample:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var stockholm = new google.maps.LatLng(59.32522, 18.07002);
  var map;

  function initialize() {
    var mapOptions = {
      zoom: 0,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: stockholm
    };

    map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

   google.maps.event.addListener(map, 'idle', function() {
      var b = map.getBounds();
      document.getElementById("bounds").innerText = b.getSouthWest().lng() + ", " + b.getNorthEast().lng();
   });

  }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;">map div</div>
<div id="bounds" style="left: 100px; top: 0px; width: 300px; height: 30px; position: absolute; background-color: #a0a0a0;"></div>
</body>
</html>

At MINIMUM zoom level, when you can see several world maps, I expect longitude bounds to be -180 - 180, but in real I don't get it. Is my expectation wrong and why?

In real application I have a server-side code that fetches markers from database depending on current map bounds.

Not clear what you are asking here. Provide specific details on what you are seeing, what you expect to see, and how they are different. — Cheeso
If you run my sample (I have just changed zoom level to 0), you will see the following longitude values or like: -159.11748, -164.7424800000001. I expect to see -180, 180 as the map is completely visible at this moment. — Igor Nikolaev
The bounds returned is apparently the longitude displayed at the far west and far east of the map div. So if you have a "full world" display and the 180th meridian is not precisely aligned with the left of the div, then you will get something other than -180 and +180 as your bounds. People have had difficulty with this previously: code.google.com/p/gmaps-api-issues/issues/detail?id=2009 what you seem to want is the "non wrapped" bounds of the map. I'm not sure how to do that in the Google maps v3 API. — Cheeso

whiteatom whiteatom · Accepted Answer · 2012-03-14T22:00:09

The bounds will report the lat and lng at the bounds of the window - even if the map has wrapped a few times. So what ever the lat,lng of the bottom right of your window will be one point, and the upper left will be the other.

I had this same issue and what I ended up doing was creating a World bounds that was 90, 180 to -90, -180 and then seeing if that fit in the window.

var ne = new google.maps.LatLng(90, 180);
var sw = new google.maps.LatLng(-90, -180)
var world = new google.maps.LatLngBounds(ne, sw);
var fetchbounds;
if(map.getBounds().contains(ne) && map.getBounds().contains(sw)){
    fetchBounds = world;
}else{
    fetchBounds = map.getBounds();
}

Google Maps bounds on minimal zoom

1 Answers