谷歌地图世界的界限仍然让世界重演

Question

所以我正在制作一张地图，我想制作它让用户不能在地图外面播放（所以没有重复的世界），所以当他们一直缩放时，他们会看到整个地图：

当他们试图向左或向右平移时，他们在完全放大时无法放弃

我目前已经拥有它，以便用户仍然可以左右平移，但它仍然有一点已经偿还了它的示例片段

有人知道如何实现这一点，或者是我正在努力做到的事情

$(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 < AminX) {
          X = AminX;
        }
        if (X > AmaxX) {
          X = AmaxX;
        }
        if (Y < AminY) {
          Y = AminY;
        }
        if (Y > 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 <= 512) {
      if (dev === true) {
        console.log("Zoom level 1");
      }
      return 1;
    } else if (w > 512 && w <= 1024) {
      if (dev === true) {
        console.log("Zoom level 2")
      }
      return 2;
    } else if (w > 1024 && w <= 2048) {
      if (dev === true) {
        console.log("Zoom level 3")
      }
      return 3;
    } else if (w > 2048 && w <= 4096) {
      if (dev === true) {
        console.log("Zoom level 4")
      }
      return 4;
    } else if (w > 4096 && w <= 8192) {
      if (dev === true) {
        console.log("Zoom level 5")
      }
      return 3;
    }
  }

  function getLatLng(w) {
    if ((w <= 512) || (w > 512 && w <= 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);
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  background-color: #19191A !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id=map></div>

经过一些调整后我确定它有点动态，但我仍然有问题，我可以向左移动。

我现在使用的代码：

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 < AminX) { X = AminX; }
            if (X > AmaxX) { X = AmaxX; }
            if (Y < AminY) { Y = AminY; }
            if (Y > AmaxY) { Y = AmaxY; }

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

仍然给出了这一点

向左或向右拖动时