Google Maps Strict Bounds for panning

Question

I am using the example at:

Google Maps v3 - limit viewable area and zoom level

The problem is I determined the sw and ne points on my custom map, but it seems to only prevents panning based on the center of the map and this allows for panning outside of the strict bounds.

Here is my code:

   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(sw_lat, sw_lon), 
     new google.maps.LatLng(ne_lat, ne_lon)
   );

   google.maps.event.addListener(map, 'drag', 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));
   });

score 1 · Answer 1 · edited Feb 19 '14 at 16:51

1

I found this to be a much cleaner solution. It combines the functionality by listneing/panning based on the center point but uses the test of detecting whether a certain set of bounds is within another. Seems to work perfectly for me.

google.maps.event.addListener(map, 'center_changed', function(){

        var mapBounds = map.getBounds();

        if (imageBounds.contains(mapBounds.getNorthEast()) && imageBounds.contains(mapBounds.getSouthWest()))
        {
            lastValidCenter = map.getCenter();
            return;
        }

        map.panTo(lastValidCenter);

    });

// Update: + missing semicolon

edited Feb 19 '14 at 16:51

CREEATION

232
1
10

answered Nov 26 '13 at 17:18

Robin

686
1
9
18

What is `imageBounds` here? – Aleksander Lopez Feb 06 '14 at 14:50
Oh sorry it's not clear. imageBounds is an instance of the google LatLngBounds class. In this case it is the bounds that you want to restrict your panning to https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds – Robin Feb 11 '14 at 03:52

score -1 · Answer 2 · edited Oct 11 '12 at 14:45

You'd probably have to use the map.getBounds instead of map.getCenter, and see if the edges of that fall outwith the bounds of strictBounds.

This is completely untested, but something like this is how I'd tackle it:

   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(sw_lat, sw_lon), 
     new google.maps.LatLng(ne_lat, ne_lon)
   );

   google.maps.event.addListener(map, 'drag', function()
   {
        var mapBounds = map.getBounds(),
        map_SW_lat = mapBounds.getSouthWest().lat(),
        map_SW_lng = mapBounds.getSouthWest().lng(),
        map_NE_lat = mapBounds.getNorthEast().lat(),
        map_NE_lng = mapBounds.getNorthEast().lng(),
        maxX = strictBounds.getNorthEast().lng(),
        maxY = strictBounds.getNorthEast().lat(),
        minX = strictBounds.getSouthWest().lng(),
        minY = strictBounds.getSouthWest().lat();

        if (strictBounds.contains(mapBounds.getNorthEast()) && strictBounds.contains(mapBounds.getSouthWest())) 
        {
            return;
        }

        // We're out of bounds - Move the map back within the bounds
        if (map_SW_lng < minX) map_SW_lng = minX;
        if (map_SW_lng > maxX) map_SW_lng = maxX;
        if (map_NE_lng < minX) map_NE_lng = minX;
        if (map_NE_lng > maxX) map_NE_lng = maxX;

        if (map_SW_lat < minY) map_SW_lat = minY;
        if (map_SW_lat > maxY) map_SW_lat = maxY;
        if (map_NE_lat < minY) map_NE_lat = minY;
        if (map_NE_lat > maxY) map_NE_lat = maxY;

        map.panToBounds(new google.maps.LatLngBounds(
        new google.maps.LatLng(map_SW_lat, map_SW_lng), 
        new google.maps.LatLng(map_NE_lat, map_NE_lng)
        ));
    });

That doesn't seem to work. The cursor gets pinned to the map and I can't stop panning. — Chris Muench, Oct 11 '12 at 14:39
I corrected the code, but it still does very odd things. I can pan left forever and when I pan down it gets jumpy. I will see if I can follow the logic and fix — Chris Muench, Oct 11 '12 at 14:46

Google Maps Strict Bounds for panning

2 Answers2