title: Twitter Bootstrap & Google Maps
body: <p>I have a navbar and 100% x 100% google map in my app. I would like to add a sidebar on the right with different filters. Reason for adding it on the right side is because of better experience on smaller screens as the right content is pushed below.</p>
  
  <p>The map renders full screen with fluid (%) values when I just add the map after the last nav bar div, like this:</p>
  
  <p>Map is visible:</p>
  
  <pre><code>&lt;div class="navbar"&gt;
      &lt;nav bar stuff......&gt;
  &lt;/div&gt;
  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Map is not visible if I try to add it inside a span to control the size of it and add a side bar.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span9"&gt;
              &lt;div id="map-canvas"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span3"&gt;
              &lt;div class="well sidebar-nav"&gt;
                  &lt;ul class="nav nav-list"&gt;
                      &lt;li class="nav-header"&gt;Sidebar&lt;/li&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't want to add a fixed value to the map, since it defeats the purpose of fluid.</p>
  
  <p>Thanks in advance for any tips on how I can make the map visible inside a container-fluid.</p>