JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<body>
    <header>Title</header>
    <div id="appcontent">
        <div id="map-canvas"></div>
    </div>
</body>

CSS

html, body {
    margin: 0px;
    width: 100%;
    height: 100%;
}
#appcontent {
    width: 100%;
    height: 100%;
}
#map-canvas {
    width: 100%;
    height: 100%;
}
header {
    width: 100%;
    height: 40px;
    background-color: #CFCFCF;
}

JavaScript

jQuery(document).ready(function () {
    //
    $("#appcontent").height($(document.body).height() - $("header").height());
    
    var mapOptions = {
        center: new google.maps.LatLng(42.0, -120.644),
        zoom: 8
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});