JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
    <div id="wrapper" data-role="page" data-theme="a">
        <div id="header" data-role="header">
            <h1>Header</h1>
        </div>
        <div id="content" data-role="content" height="remainder">
            <div id="map_canvas"></div>
        </div>
    </div>

CSS

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper
{
    width: 100%;
    height: 100%;
}

#header 
{
    z-index: 10;
}

#content 
{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
}


#content #map_canvas
{
    width: 100%;
    height: 100%;
    padding: 0;
    text-shadow: none;
}

JavaScript

function remainder() {
        $("*[height=\"remainder\"]").each(function(index, element) {
            var offsetParent;
            var target = $(element);
            if (element==$("body")[0]) {
                offsetParent = $("html");
            }
            else {
                offsetParent = target.offsetParent();
            }
            var position = target.position();
            var heightParent = offsetParent.height();
            var extras = target.outerHeight(true)-target.height();
            var remainderHeight = heightParent-position.top;
            target.height(remainderHeight-extras);
        });
    }  
    $(document).ready(function() {
        remainder();
    });

        var myOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);