title: Dynamic google map with custom tiles prevent repeating pan
body: <p>I have a dynamic tile set where I do NOT want to allow panning outside of its bounds.</p>
  
  <p>The below code gets me close, but the user can still scroll horizontally outside of strict bounds because it uses the map center for comparison</p>
  
  <pre><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 &lt; minX) x = minX;
   if (x &gt; maxX) x = maxX;
   if (y &lt; minY) y = minY;
   if (y &gt; maxY) y = maxY;
  
   map.setCenter(new google.maps.LatLng(y, x));
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/QHkHl.png" alt="What is happening"></p>
  
  <p><img src="https://i.stack.imgur.com/GiyTI.jpg" alt="What I want"></p>