Twitter Bootstrap column and Google Maps not working together

Question

I have a silly css problem but I can't seem to solve it. I'm inserting a google map into a 12 size twitter bootstrap column:

<div class="col-lg-12" style="height:50%;">
   <div id="map-canvas" style="position:static !important;height:50%  !important;"></div>
</div>

I end up with the map loading but it doesn't take up any space/height:

I've tried adding a height to the map. I've tried adding a height to the column and nothing seems to work. Someone show me the light here

Answer 1

You need to set a specific pixel height for #mapCanvas..

or make sure the mapCanvas containers (html,body) have a height..

html, body {
  height: 100%;
}

#map-canvas {
  margin: 0;
  padding: 0;
  height: 50%;
}

Demo: http://www.bootply.com/118448