Jquery resizable not working with google maps

Question

I am trying to sit google maps in a resizable div at the bottom of the screen, however it doesnt want to appear.

Has anyone used JQuery resizable with google maps and found difficulties implementing?

Visual representation of how i want it to appear on the page

So far i have the setup here:fiddle

This is my current code:

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

Answer 1

You aren't calling the initMap function.

updated fiddle (calls initMap when the API has loaded)

code snippet:

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

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmIz3c-nQR5BkM2WbFyoUwc94bLMc36Nw&callback=initMap" async defer></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.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>
<script>
  $(".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
    });
  }
</script>