title: Google maps interferring with Twitter Bootstrap
body: <p>I have a page on which I use bootstrap and I added a map (API v3).</p>
  
  <p>It works fine at first, but when I collapse the map - I can't reopen it.</p>
  
  <p>I've looked through similar SO questions, but couldn't find one addressing this.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="mapHeader" data-toggle="collapse" data-target="#map"&gt;
      Header
  &lt;/div&gt;
  &lt;div id="map" class="collapse in"&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#map_canvas { height: 100% }
  #map {height: 30em; width: 50%;max-height:100%;}
  </code></pre>
  
  <p>Javascript only loads the map.</p>
  
  <p><a href="http://jsfiddle.net/jnfsmile/kS9jh/3/" rel="nofollow noreferrer">A fiddle to demonstrate</a></p>
  
  <p><a href="https://stackoverflow.com/questions/10197128/google-maps-api-v3-not-rendering-competely-on-tabbed-page-using-twitters-bootst">Seems related, but I couldn't implement the same solution</a></p>