jQuery可调整大小无法与谷歌地图一起使用

我试图将google maps放置在屏幕底部的可调整大小的div中，但是它不想出现。

有没有人使用可通过Google地图调整大小的JQuery，发现在实现时遇到困难？

我希望它如何出现在页面上的视觉表示

到目前为止，我在这里有设置：小提琴

这是我当前的代码：

的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>

的CSS

#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;
}

JS

$(".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
  });
}