JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="pretend_responsive_container">
  <div id="map_canvas_parent">
    <div id="map_canvas"></div>
  </div>
</div>

CSS

#pretend_responsive_container { height: 411px; width: 301px; }
#map_canvas_parent { height: 99%; width: 99%; }
#map_canvas { height: 200px; width: 200px  }

JavaScript

var map = null;
var g = google.maps;
function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    console.log('Start Size = '+$('#map_canvas').height()+', '+$('#map_canvas').width())
    // This works
    // $('#map_canvas').width(parseInt($('#map_canvas').parent().width()-50))
    // $('#map_canvas').height(parseInt($('#map_canvas').parent().height()-50))
    // So does this:
    $('#map_canvas').css(
        {height: parseInt($('#map_canvas').parent().height()-50),
         width: parseInt($('#map_canvas').parent().width()-50)}
    )
    console.log('Resized = '+$('#map_canvas').height()+', '+$('#map_canvas').width())
    google.maps.event.trigger(map, 'resize')
    console.log('Resize Triggered')    
 }
window.onload = initialize();
map.set('minZoom', 4);