JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<header class="hidden-print">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">menus</div>
    </div>
</header>
<div class="container-fluid">
    <div id="map_canvas" class="map_canvas"></div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
    <div class="row">stuff</div>
</footer>

CSS

html, body, .container-fluid,#map_canvas {
    height:100%;
}
.container-fluid {
    width:100%;
    position:absolute;
    top:0;
    padding:0;
}
#map_canvas {
    border-top:50px solid #fff;
    border-bottom:20px solid #fff;
}
header {
    height:50px;
}
footer {
    height:20px;
}

JavaScript

$(function () {
    var mapDiv = document.getElementById("map_canvas");
    /// Set control options for map
    var zoptions = {
        position: google.maps.ControlPosition.TOP_RIGHT,
        style: google.maps.ZoomControlStyle.SMALL
    };
    /// Position of map using coord that were passed else do nothing.
    var pos = new google.maps.LatLng(40.716948, -74.003563);
    /// Set basic map options using above control options
    var options = {
        zoom: 10,
        zoomControlOptions: zoptions,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        center: pos
    };
    this.map = new google.maps.Map(mapDiv, options);
})