fix heights

Index.html

@@ -18,6 +18,8 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
 	<!-- javascripts -->
+	<script src="js/libs/jquery.min.js"></script>
+	<script src="js/libs/knockout-3.4.2.js"></script>
 	<script src="js/script.js"></script>
 
   </head>
@@ -41,7 +43,9 @@ <h1>Coffee Shop Locations</h1>
 	      <i class="fas fa-bars"></i>
 	    </div> <!-- end of header div -->
 
-        <div id="map"></div>
+	    <div id="map_container">
+          <div id="map"></div>
+		</div> <!-- end of map_container -->
       </div> <!-- end of header_map_wrapper -->
 
     </div> <!-- end of div class="container" -->

css/style.css

@@ -22,6 +22,7 @@ body {
 	height: 100%;
 	margin: 0;
 	padding: 0;
+	position: relative;
 }
 
 .header {
@@ -52,9 +53,19 @@ h1 {
   width: 48%;
 }
 /* https://github.com/google-map-react/google-map-react/issues/142 */
-#map {
-  width: 100%;
+
+#map_container {
+  position: relative;
   height: 100%;
+  flex: 2 2 auto;
+}
+
+#map {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 
 .options-box {
@@ -66,5 +77,4 @@ h1 {
   padding: 10px 10px 0 10px; /* top right bottom left */
   text-align: left;
   width: 340px;
-
 }

js/script.js

@@ -140,7 +140,7 @@ function initMap() {
         ]
     }
 ]; // end of map styles array
-		
+
   // Constructor creates a new map - only center and zoom are required.
   map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 40.7413549, lng: -73.9980244},
@@ -149,6 +149,16 @@ function initMap() {
 	mapTypeControl: false
   });
 
+  // Fix heights (JQuery method)
+  // Flex does not work properly with google maps to fill remaining height as it would with an image.
+  // The header at 50px and 2 borders at 1px each extend the map size beyond 100% by 52px.
+  // Set initial height of map to height of map_container - 52px (JQuery method)
+  $('#map').height($('#map_container').height()-52);
+  // set initial height of options-box to itself - 52px (JQuery method)
+  $('.options-box').height($('.options-box').height()-12);
+  // set initial height of header_ma_wrapper to itself - 52px (JQuery method)
+  $('.header_map_wrapper').height($('.header_map_wrapper').height()-52);
+
   // These are the listings that will be shown to the user.
   // Normally we'd have these in a database instead.
   var locations = [