Question

function initialize() {
    var latlng = new google.maps.LatLng(37.7702429, -122.4245789);

    var myOptions = {
      zoom: 3,
      center: latlng,
      disableDefaultUI: false,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
    };

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

    // Limit panning
    // Latitude bounds for map, longitude not important
    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 a move listener to restrict the bounds range
    google.maps.event.addListener(map, "center_changed", function() {checkBounds(); });

    //If zoom out at bound limit then map breaks; center doesn't change but bounds get broken. Listen for zoom event and try to correct bound break. **Doesn't Work**
    google.maps.event.addListener(map, 'zoom_changed', function() {checkBounds(); });

    // If the map position is 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);
    }
  }

Basically I don’t want the user to be able to see anything outside of the map, so I have restricted the latitudinal bounds. Works normally.

The issue is that if a user we to be viewing close to the bound limits and then zooms out so that the center doesn’t change, but now the view-port bounds are outside of the bound limit, it does not correct and the map becomes unpannable.

Any help you geniuses can offer is mucho appreciated .

Answer 1

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);