Javascript Jquery可调整大小不适用于google地图

我试着把谷歌地图放在屏幕底部一个可调整大小的div中，但是它不想出现

有没有人在谷歌地图上使用jqueryresizeble并发现实现困难

到目前为止，我已经完成了设置

这是我当前的代码：

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmIz3c-nQR5BkM2WbFyoUwc94bLMc36Nw&sensor=false"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <div id="wrapper">
    <div class="n-resizable-topcontent">
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
      </div>
    <div class="resizable">
      <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
      <div class="maps" id="maps"></div>
      </div>
    </div>

JS

#wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
}

.n-resizable-topcontent {
  height: 70%;
  background-color: #0098ff;
  overflow:scroll;
}
.resizable {
  width: 100%;
  height: 30%;
  }
#ngrip {
  width: 100%;
  background-color: #ffffff;
  height: 8px;
  border: 1px solid #000000;
}

.maps {
  width: 100%;
  height: 100%;
  z-index: 9999;
}
#maps {
  max-width: none;
}

$(".resizable").resizable({
    handles: {
    'n': '#ngrip'
    },
    resize: function( event, ui ) {
            // parent
        var parent = ui.element.parent();
        var parent_height = parent.height();

        // Get the min value of height or 70% of parent height
        // Get the max value of height or 30% of parent height
        var height = Math.min(ui.size.height, parent_height * 0.7);
        height = Math.max(height, parent_height * 0.3);

        // Set height for resizable element, and do not change top position.
        // Instead the previous element - content container - will be adjusted.
        ui.size.height = height;
        ui.position.top = 0;

        // make the content container's height 100% of parent, less .resizable
        ui.element.prev('.n-resizable-topcontent').height( parent_height - height );
    }
});

//maps

function initMap() {
  // Create a map object and specify the DOM element for display.
  var map = new google.maps.Map(document.getElementById('maps'), {
    center: {lat: -34.397, lng: 150.644},
    scrollwheel: false,
    zoom: 8
  });
}

---

您没有调用

initMap

函数

代码片段：

#包装器{
位置：固定；
宽度：100%；
高度：100vh；
}
.n-可调整大小的-topcontent{
身高：70%；
背景色：#0098ff；
溢出：滚动；
}
.可调整大小{
宽度：100%；
身高：30%；
}
#ngrip{
宽度：100%；
背景色：#ffffff；
高度：8px；
边框：1px实心#000000；
}
.地图{
宽度：100%；
身高：100%；
z指数：9999；
}
#地图{
最大宽度：无；
}

这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
$（“.resizable”）.resizable({
处理：{
“n”：“ngrip”
},
调整大小：函数（事件、ui）{
//母公司
var parent=ui.element.parent（）；
var parent_height=parent.height（）；
//获取高度的最小值或父高度的70%
//获取高度的最大值或父高度的30%
变量高度=数学最小值（ui.size.height，父项高度*0.7）；
高度=数学最大值（高度，父项高度*0.3）；
//为可调整大小的元素设置高度，并且不更改顶部位置。
//相反，将调整上一个元素内容容器。
ui.size.height=高度；
ui.position.top=0；
//使内容容器的高度小于父容器的100%。可调整大小
ui.element.prev（'.n-可调整大小的-topcontent'）.height（父元素高度-高度）；
}
});
//地图
函数initMap（）{
//创建贴图对象并指定要显示的DOM元素。
var map=new google.maps.map（document.getElementById（'maps'）{
中心：{
lat:-34.397，
液化天然气：150.644
},
滚轮：错误，
缩放：8
});
}