Google maps resize not behaving correctly

Question

I have found on another SO that provides the code to resize the map upon a window resize and center, it doesnt want to work for me at the current time.

I'm still learning JS so i appreciate anyones guidance here

My maps is sitting in a .resizable div

Fiddle here of code

HTML

<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

var map;
function initialize() {
  var mapOptions = {
   center: new google.maps.LatLng(40.5472,12.282715),
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("maps"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});