Javascript 谷歌地图的棕色/不可点击部分

我对使用谷歌地图是个新手，我遇到了这样一个问题：当我改变地图容器的大小时，我的地图中有一个棕色的部分是不可读取和不可破坏的

我制作了一个按钮，可以关闭一个div并更改我的谷歌地图容器的大小

下面是更改div和map容器大小的Jquery

<script type="text/javascript">
    function clickHandler() {
        $('#hides').toggle();
        $('#shows').toggle()
        $('#settings').toggleClass('col-sm-9 col-sm-12');
        $('#resultcontainer').toggle('slow');

    }
    $(document).ready(function () {
        $('#shows').hide();
        $('#hides, #shows').on('click', clickHandler);

</script>

函数clickHandler（）{
$（“#隐藏”）.toggle（）；
$（“#显示”）.toggle（）
$（“#设置”）.toggleClass（'col-sm-9 col-sm-12'）；
$（'resultcontainer'）。切换（'slow'）；
}
$（文档）.ready（函数（）{
$（“#显示”）.hide（）；
$（“#隐藏，#显示”）。在（'click'，clickHandler）上；

以下是截图：

如你所见，在第二张照片的右侧有一个棕色的部分，不可粘贴也不可撕毁

这是我为美国设定的边界初始化

function initialize() {
            var minZoomLevel = 4;
            var zooms = 7;
            geocoder = new google.maps.Geocoder();
            geocode = new google.maps.Geocoder();

            LatLang = new google.maps.LatLng(38.50, -90.50);
            var addresse = {
                zoom: 4,
                center: LatLang,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), addresse);

            // Bounds for North America
            var strictBounds = new google.maps.LatLngBounds(
                      new google.maps.LatLng(15.70, -160.50),
                      new google.maps.LatLng(68.85, -55.90));

            // Listen for the dragend event
            google.maps.event.addListener(map, 'dragend', 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));
            });

            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });

        }

函数初始化（）{
var minZoomLevel=4；
变焦值=7；
geocoder=新的google.maps.geocoder（）；
geocode=新的google.maps.Geocoder（）；
LatLang=newGoogle.maps.LatLng（38.50，-90.50）；
变量地址={
缩放：4，
中心：拉特朗，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新的google.maps.map（document.getElementById（'map'），地址）；
//前往北美的边界
var strictBounds=new google.maps.LatLngBounds(
新google.maps.LatLng（15.70，-160.50），
新google.maps.LatLng（68.85，-55.90））；
//收听dragend事件
google.maps.event.addListener（映射'dragend'，函数（）{
if（strictBounds.contains（map.getCenter（））返回；
//我们超出边界-将地图移回边界内
var c=map.getCenter（），
x=c.lng（），
y=c.lat（），
maxX=strictBounds.getNorthEast（）.lng（），
maxY=strictBounds.getNorthEast（）.lat（），
minX=strictBounds.getSouthWest（）.lng（），
minY=strictBounds.getsoutwest（）.lat（）；
如果（xmaxX）x=maxX；
如果（ymaxY）y=maxY；
map.setCenter（新的google.maps.LatLng（y，x））；
});
//限制缩放级别
google.maps.event.addListener（映射'zoom_changed'，函数（）{
if（map.getZoom（）

在调整容器大小后，调用事件处理程序上的

google.maps.event.trigger（映射“resize”）；

函数（因此它不会影响当前的映射活动）

例如，您可以在此处更改地图容器的大小：

$("#btn").click(function(){
  $("#map").toggleClass("larger");
  google.maps.event.trigger(map, 'resize');
});

然而，对于地图中的棕色线，我认为存在影响它的元素。您可能需要尝试z索引并将地图放在最上面

---

更新

当容器大小更改时，您是否尝试过重新加载google地图？@Froient yah，尝试过同样的方法happens@Froient等等，先生，我会发布我的初始化代码如果您正在更改地图容器的大小，那么根据谷歌文档：当div更改大小时，开发人员应该在地图上触发此事件：

google.maps.event.trigger（映射“调整大小”）

@AntoJurković先生谢谢，但我能知道我在哪里可以在我的代码中输入该事件吗我想你已经搞定了Froient先生..谢谢…先生只是一个后续问题，正如你所看到的，我的地图上有一些棕色的线，知道吗？先生，我想它不起作用，因为当我在地图中过滤一些标记，然后按下按钮，它就消失了再次添加广告并删除所有筛选标记