Stop drag of google map outside visual bounds

Question

When you are pretty far zoomed out on a google map, you can drag it enough so that the map ends and becomes a blank gray color. The map seems to repeat seemlessly on the horizontal axis, but not vertically.I'm wondering if there is a way to prevent the map from being dragged when it reaches that gray area. Any ideas?

Answer 1

This is a good example of how to limit the range of a map. It's a bit of a hack, but it's probably your only real option.

Answer 2

Just for fun, another approach would be to tell the map to wrap vertically in the same way that it wraps horizontally, by overwriting GMercatorProjection.prototype.tileCheckRange before creating the map.

  GMercatorProjection.prototype.tileCheckRange=function(a,b,c){
    var d = 1<<b;
    if (a.y<0||a.y>=d) {
      a.y=a.y%d;
      if(a.y<0){
        a.y+=d;
      }
    }
    if(a.x<0||a.x>=d){
      a.x=a.x%d;
      if(a.x<0){
        a.x+=d;
      }
    }
    return true
  }

The downside is that the API doesn't contain any code for causing the markers and polylines to jump vertically to the copy of the map that's in view, they only jump horizontally. A complete solution would require writing own code to do the vertical jumps, and use unbounded GLatLngs throughout.