Flaw in getZoomByBounds

Shows flaw in Stackoverflow answer: http://stackoverflow.com/a/9982152/859640

by john_s

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="mapDiv" style="width: 500px; height: 375px; border: solid 2px #666;">
</div>

JavaScript

function getZoomByBounds( map, bounds ){
  var MAX_ZOOM = map.mapTypes.get( map.getMapTypeId() ).maxZoom || 21 ;
  var MIN_ZOOM = map.mapTypes.get( map.getMapTypeId() ).minZoom || 0 ;

  var ne= map.getProjection().fromLatLngToPoint( bounds.getNorthEast() );
  var sw= map.getProjection().fromLatLngToPoint( bounds.getSouthWest() ); 

  var worldCoordWidth = Math.abs(ne.x-sw.x);
  var worldCoordHeight = Math.abs(ne.y-sw.y);
    
  //Fit padding in pixels 
  var FIT_PAD = 40;

  for( var zoom = MAX_ZOOM; zoom >= MIN_ZOOM; --zoom ){ 
      if( worldCoordWidth*(1<<zoom)+2*FIT_PAD < $(map.getDiv()).width() && 
          worldCoordHeight*(1<<zoom)+2*FIT_PAD < $(map.getDiv()).height() )
          return zoom;
  }
  return 0;
}

var points = [
    { lat: 20, lng: -160 },
    { lat: -20, lng: 160 }
];

function createMarkerForPoint(point) {
    return new google.maps.Marker({
        position: new google.maps.LatLng(point.lat, point.lng)
    });
}

function createBoundsForMarkers(markers) {
    var bounds = new google.maps.LatLngBounds();
    $.each(markers, function() {
        bounds.extend(this.getPosition());
    });
    return bounds;
}

var $mapDiv = $('#mapDiv');

var mapDim = {
    height: $mapDiv.height(),
    width: $mapDiv.width()
}

var markers = [];
$.each(points, function() { markers.push(createMarkerForPoint(this)); });

var bounds = (markers.length > 0) ? createBoundsForMarkers(markers) : null;

var map = new google.maps.Map($mapDiv[0], {
    center: (bounds) ? bounds.getCenter() : new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 0
});

$.each(markers, function() { this.setMap(map); });

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    map.setZoom((bounds) ? getZoomByBounds(map, bounds) : 0);
    
    new google.maps.Rectangle({
        strokeColor: '#0000ff',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: '#0000ff',
        fillOpacity: 0.05,
        map: map,
       ...