title: How to get Google Map to fill div with Bootstrap
body: <p>I am looking for a better solution.</p>
  
  <p>I am trying to fill the middle of the browser screen with a Google Map. (between menu and footer)  On IE the below code works fine.  Sometimes it works for Chrome but almost always only shows the map in 25% of the map_canvas on Firefox.</p>
  
  <p>Now after the page renders the entire map_canvas div is grey and fills the area so the 100% works in all browsers.  If I resize the browser the map fills the whole area so on resize event it works in all browsers.  The problem is in Chrome and Firefox the map only takes up about 25% of the grey area of the map_canvas div.</p>
  
  <p>So the only thing I can think of is in IE the CSS for the div happens before the map is rendered and in Chrome and Firefox it happens after the map is rendered.  I don't know if this is because I am using bootstrap or a problem with something else.</p>
  
  <p>I have a temp work around using this code.  By setting the map_canvas height to the document height minus the menu/footer the map always displays in all browsers.  The problem with this is if the user resizes the screen the map does not resize which is awkward and looks bad.  I guess in desperation I could overload the windows resize event and just keep changing the map_canvas size but that sounds like a ugly hack too.  Looking for something less ugly.</p>
  
  <pre><code>$("#map_canvas").css("min-height", $(document).height() - 70);
  </code></pre>
  
  <p>Browser sudo code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;!-- header stuff --&gt;
  &lt;style&gt;
  &lt;!-- in CSS file --&gt;
  #map_canvas
  {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class="hidden-print"&gt;
          &lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
              &lt;div class="container"&gt;
          menus
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/header&gt;
      &lt;div class="container-fluid"&gt;
      &lt;div id="map_canvas" class="map_canvas"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer class="navbar-default navbar-fixed-bottom"&gt;
          &lt;div class="row"&gt;
          stuff
          &lt;/div&gt;
      &lt;/footer&gt;
          &lt;script type="text/javascript"&gt;
          $(function () {
          var mapDiv: HTMLElement = 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: google.maps.MapOptions = {
              zoom: 10,
              zoomControlOptions: zoptions,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
              center: pos
          };
          this.map = new google.maps.Map(mapDiv, options);
          })
         &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>