Google Maps API: prevent dragging in the gray area

Question

I use the Google Maps API (v3) to display a world map. When I zoom in (to zoom level 1) and start dragging the canvas, I can get out of the map and the area outside is grayed out. I want the user not to drag the map outside the world map. How to do it?

Answer 1

You can set minZoom and maxZoom to make sure the available zoom levels are within your borders, hope this helps?

Answer 2

google.maps.event.addListener(Map, 'drag', function(){

    var proj =Map.getProjection();
    var bounds = Map.getBounds();
    var sLat =Map.getBounds().getSouthWest().lat();
    var nLat = Map.getBounds().getNorthEast().lat();
    if (sLat < -85 || nLat > 85) {
        // alert('Gray area visible');
        Map.setOptions({
              center: new google.maps.LatLng(
                  cen_Lati , // set Latitude for center of map here
                  cen_Longi) // set Langitude for center of map here
              });         
       // Map.fitBounds(boundsNew);  Or Define bound that u want show
     }
});