Google maps api 3 Bounds can't move map
<p>Hello so I'm working on a project that involves google maps and I'm currently trying to make it so the end users won't have a repeating map so I use bounds but when I do that I can't pan at all for some reason. </p>

<p><a href="http://pastebin.com/PKJ43Spy" rel="nofollow noreferrer">OLD code here</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  var dev = true;
  var zoomed = false;

  //Google Maps JS
  //Map styling
  var Mapstyle = [{
    "stylers": [{
      "visibility": "simplified"
    }]
  }, {
    "stylers": [{
      "color": "#19191a"
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "color": "#1a1a1a"
    }, {
      "lightness": 8
    }]
  }, {
    "elementType": "labels.text.fill",
    "stylers": [{
      "visibility": "on"
    }, {
      "lightness": 25
    }]
  }];

  //Set Map
  function init() {

    //Calculate Center of the world when map loads
    var w = window.innerWidth;

    var mapOptions = {
      minZoom: getZoom(w),
      zoom: getZoom(w),
      center: getLatLng(w),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      styles: Mapstyle
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);


    //Get visitors location and place maker on top of it
    $.getJSON('http://freegeoip.net/json/', function(location) {
      getCountry(location.country_code);
    });

    function getCountry(country) {
      geocoder = new google.maps.Geocoder();
      geocoder.geocode({
        'address': country
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }

    //Testing bounds
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      allowedBounds = map.getBounds();
      if (dev === true) {
        console.log(allowedBounds);
      }
      google.maps.event.addListener(map, 'center_changed', function() {
        checkBounds(allowedBounds);
      });
    });

    // Limit map area
    function checkBounds(allowedBounds) {

      if (!allowedBounds.contains(map.getCenter())) {
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        if (X &lt; AminX) {
          X = AminX;
        }
        if (X &gt; AmaxX) {
          X = AmaxX;
        }
        if (Y &lt; AminY) {
          Y = AminY;
        }
        if (Y &gt; AmaxY) {
          Y = AmaxY;
        }

        map.setCenter(new google.maps.LatLng(Y, X));
      }
    }

    //Resize Function
    google.maps.event.addDomListener(window, "resize", function() {
      if (zoomed === false) {
        map.setZoom(getZoom(4));
        zoomed = false;
      } else {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
      }
    });
  }

  function getZoom(w) {
    if (w &lt;= 512) {
      if (dev === true) {
        console.log("Zoom level 1");
      }
      return 1;
    } else if (w &gt; 512 &amp;&amp; w &lt;= 1024) {
      if (dev === true) {
        console.log("Zoom level 2")
      }
      return 2;
    } else if (w &gt; 1024 &amp;&amp; w &lt;= 2048) {
      if (dev === true) {
        console.log("Zoom level 3")
      }
      return 3;
    } else if (w &gt; 2048 &amp;&amp; w &lt;= 4096) {
      if (dev === true) {
        console.log("Zoom level 4")
      }
      return 4;
    } else if (w &gt; 4096 &amp;&amp; w &lt;= 8192) {
      if (dev === true) {
        console.log("Zoom level 5")
      }
      return 3;
    }
  }

  function getLatLng(w) {
    if ((w &lt;= 512) || (w &gt; 512 &amp;&amp; w &lt;= 1024)) {
      var smallLatLng = new google.maps.LatLng(0, 0);
      return smallLatLng;
    } else {
      var normalLatLng = new google.maps.LatLng(25, 0);
      return normalLatLng;
    }
  }
  google.maps.event.addDomListener(window, 'load', init);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  background-color: #19191A !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?v=3"&gt;&lt;/script&gt;
&lt;div id=map&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>ok after some tweaking i have made it a bit more dynamic but i still have the issue that i can pan to the left.</p>

<p>the code i'm using now:</p>

<pre><code>google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
        allowedBounds = map.getBounds();
        if(dev === true ) { console.log(allowedBounds); }
        google.maps.event.addListener(map, 'center_changed', function () {
            checkBounds(allowedBounds);
        });
    });

    // Limit map area
    function checkBounds(allowedBounds) {

        if (!allowedBounds.contains(map.getCenter())) {
            var C = map.getCenter();
            var X = C.lng();
            var Y = C.lat();

            var AmaxX = allowedBounds.getNorthEast().lng();
            var AmaxY = allowedBounds.getNorthEast().lat();
            var AminX = allowedBounds.getSouthWest().lng();
            var AminY = allowedBounds.getSouthWest().lat();

            if (X &lt; AminX) { X = AminX; }
            if (X &gt; AmaxX) { X = AmaxX; }
            if (Y &lt; AminY) { Y = AminY; }
            if (Y &gt; AmaxY) { Y = AmaxY; }

            map.setCenter(new google.maps.LatLng(Y, X));
        }
    }
</code></pre>

<p>still gives this 
<a href="https://i.stack.imgur.com/5zvjM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5zvjM.png" alt="enter image description here"></a></p>

<p>When draging to the left or right </p>