How to Limit Panning in Google Maps API V3

Google Maps API 3 - limit pan/map bounds

You have your strictBounds mixed up - change the order of them and it should work fine.

A LatLngBounds should be SW corner first, NE corner second:
http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds

var strictBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(49.90878, -7.69042),
  new google.maps.LatLng(60.88770, -0.83496) 
);

Google Maps v3 - limit viewable area and zoom level

You can listen to the dragend event, and if the map is dragged outside the allowed bounds, move it back inside. You can define your allowed bounds in a LatLngBounds object and then use the contains() method to check if the new lat/lng center is within the bounds.

You can also limit the zoom level very easily.

Consider the following example: Fiddle Demo

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 5;

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });

   </script> 
</body> 
</html>

Screenshot from the above example. The user will not be able to drag further south or far east in this case:

Google Maps JavaScript API v3 Example: Force stop map dragging

Google Maps API V3: Zoom out breaks pan limitation; workaround?

Ok, so it was very simple. The zoom_changed event was not behaving as expected and bounds_changed on it's own was not satisfactory. This map will not go out of bounds by pan or zoom and is perfect for if you want the user to only see map and no grey background. Not so good if your users want to center the map at a high latitude and low zoom level. Cross that bridge later. Here's the code:

    // The allowed region which the whole map must be within
    var southWest = new google.maps.LatLng(-85.000, -122.591);
    var northEast = new google.maps.LatLng(85.000, -122.333);
    var allowedBounds = new google.maps.LatLngBounds(southWest, northEast);

    // Add listeners to trigger checkBounds(). bounds_changed deals with zoom changes.
    google.maps.event.addListener(map, "center_changed", function() {checkBounds(); });
    google.maps.event.addListener(map, 'bounds_changed', function() {checkBounds(); });

    // If the map bounds are out of range, move it back
    function checkBounds() {
      // Perform the check and return if OK
      if ((allowedBounds.getNorthEast().lat()>(map.getBounds().getNorthEast().lat()))&&(allowedBounds.getSouthWest().lat()<(map.getBounds().getSouthWest().lat()))) {
        lastValidCenter = map.getCenter();
        lastValidZoom = map.getZoom();
        return
      }
      // not valid anymore => return to last valid position
      map.panTo(lastValidCenter);
      map.setZoom(lastValidZoom);

How to block google maps api v3 panning in the gray zone over north pole or under south pole?

Working for me with the attribute "restriction":

new google.maps.Map(document.getElementById('#mapCanvas'), {
  zoom: 2,
  center: {lat: 0, lng: 0},
  tilt: 0,
  restriction: {
    latLngBounds: {north: 85, south: -85, west: -180, east: 180},
    strictBounds: true
  },
});

How to prevent panning outside world edges on google maps?

According to the documentation:

A restriction that can be applied to the Map. The map's viewport will not exceed these restrictions.

latLngBounds

Type: LatLngBounds|LatLngBoundsLiteral

When set, a user can only pan and zoom inside the given bounds. Bounds can restrict both longitude and latitude, or can restrict latitude only. For latitude-only bounds use west and east longitudes of -180 and 180, respectively. For example,

latLngBounds: {north: northLat, south: southLat, west: -180, east: 180}

Set the longitude limits to something that isn't -180/+180.

proof of concept fiddle

code snippet:

function initMap() {
  var defaultLatLong = {
    lat: 45.4655171,
    lng: 12.7700794
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    center: defaultLatLong,
    zoom: 3,
    minZoom: 3,
    restriction: {
      latLngBounds: {
        east: 179.9999,
        north: 85,
        south: -85,
        west: -179.9999
      },
      strictBounds: true
    }
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>