title: Google Maps does not display on Bootstrap?
body: <p>I am trying to implement google maps on bootstrap.</p>
  
  <p>I've followed Google's own guide, here: <a href="https://developers.google.com/maps/documentation/javascript/examples/map-simple" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/map-simple</a></p>
  
  <p>Whilst this works on a standalone page, when I add the Bootstrap CSS the map doesn't show. I can't seem to find a hack that fixes it. </p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;body&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>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('map-canvas'),
        mapOptions);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>CSS (over bootstrap)</p>
  
  <pre><code>  html, body, #map-canvas {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </code></pre>
  
  <p>See here for jsFiddle: <a href="http://jsfiddle.net/robmc/6BTjE/2/" rel="nofollow">http://jsfiddle.net/robmc/6BTjE/2/</a></p>
  
  <p>Has anyone encountered this before? I must be missing a basic workaround but no amount of forum searching has helped.</p>
  
  <p>Thanks</p>