JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    </head>
    <body>
	<!-- Header -->
	<div id="topbar">
		<div class="left">
		Logo
		</div>
		<div class="right">
<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
  </div>
</form>
		</div>
	</div>
	<!-- Map -->
	<div id="main">
	Map
	</div>
	<!-- Footer -->
	<div id="bottombar">
		<div class="left">
		Name
		</div>
		<div class="right">
		About
		</div>
	</div>
    </body>
</html>

CSS

html, body { height: 100%;
    width: 100%;
}

#topbar {
    height: 50px; 
    width: 100%; 
    background-color: black;
    padding-left: 50px;
    padding-right: 50px;
}

#main {
    height: 100%; 
    width: 100%;
    background-color: green;
}
#bottombar {
    height: 25px; 
    width: 100%; 
    background-color: black;
    padding-left: 50px;
    padding-right: 50px;
}


.left {float: left;}
.right {float: right;}

JavaScript

var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('main'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);