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">
            <div class="inner-content">
                <div id="map_canvas"></div>
            </div>
        </div>
    </div>

CSS

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

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

#header 
{
    z-index: 10;
}

#content 
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin-top: -41px;
    padding: 0;
}

#content .inner-content 
{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

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

JavaScript

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