title: Google Maps API 3 - limit pan/map bounds
body: <p>I am completely new to Google Maps and am just creating my first map so that I can incorporate it into my website. </p>
  
  <p>I am trying to limit the area that the user can move around to just the UK and have looked at several posts on here that all give very similar answers, however I haven't been able to get the code to work for me. <a href="https://stackoverflow.com/questions/3818016/google-maps-v3-limit-viewable-area-and-zoom-level">This solution is the closest that I have got</a> however whenever I try and move the map at all it centers on one of my boundary points and I am unable to move it anywhere else. </p>
  
  <p>I may have made a really silly mistake, in which case I apologise, however I can't work out what is wrong. Does anyone have any ideas? </p>
  
  <p>Thank you </p>
  
  <p>My code is below (taken from Google's sample code and then added to) - the part that is relevant to the bounds is near the bottom, starting with setting the bounds for the UK:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;title&gt;Google Maps&lt;/title&gt;
      &lt;style type="text/css"&gt;
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 100% }
      &lt;/style&gt;
      &lt;script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=MYKEY&amp;sensor=false"&gt;
      &lt;/script&gt;
  
      &lt;?
      //code to get long and lat from http://www.webmonkey.com/2010/02/get_started_with_google_geocoding_via_http
      $apikey = MYKEY;
      $geourl = "http://maps.google.com/maps/geo?q=LS255AA&amp;output=csv&amp;key=$apikey";
  
      // Create cUrl object to grab XML content using $geourl
      $c = curl_init();
      curl_setopt($c, CURLOPT_URL, $geourl);
      curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
      $csvContent = trim(curl_exec($c));
      curl_close($c);
  
      // Split pieces of data by the comma that separates them
      list($httpcode, $elev, $lat, $long) = split(",", $csvContent);
      ?&gt;
  
      &lt;script type="text/javascript"&gt;
      var lat = "&lt;?= $lat ?&gt;";
      var long = "&lt;?= $long ?&gt;";
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          function initialize() {
              //sets the long and lat of map
              var myLatlng = new google.maps.LatLng(lat, long);
  
              //options for the map
              var myOptions = {
                  center: myLatlng,
                  zoom: 9,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
  
              //creates the map
              var mymap = new google.maps.Map(document.getElementById("map_canvas"),
                  myOptions);
  
              //sets min and max zoom values
              var opt = { minZoom: 7, maxZoom: 11 };
                  mymap.setOptions(opt);
  
              //creates marker
              var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: mymap,
                  title:"Hello World!"
              });
  
              //content of infowindow
              var contentString = '&lt;h2&gt;I am an info window&lt;/h2&gt;'+'&lt;p&gt;Hello my name is infowindow, I need more text to test how big I get&lt;/p&gt;';
  
              //creates infowindow
              var infowindow = new google.maps.InfoWindow({
                      content: contentString,
              });
  
              //infowindow options
              infowindow.setOptions({maxWidth:200}); 
  
              //listens for click and opens infowindow
              google.maps.event.addListener(marker, 'click', function() {
                   infowindow.open(mymap,marker);
              });
              // Bounds for UK
              var strictBounds = new google.maps.LatLngBounds(
                      new google.maps.LatLng(60.88770, -0.83496), 
                      new google.maps.LatLng(49.90878, -7.69042)
              );
  
              // Listen for the dragend event
              google.maps.event.addListener(mymap, 'dragend', function() {
                  if (strictBounds.contains(mymap.getCenter())) return;
  
                  // We're out of bounds - Move the map back within the bounds
                  var c = mymap.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;
  
                  mymap.setCenter(new google.maps.LatLng(y, x));
              });
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas" style="width:50%; height:50%"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>