Twitter Bootstrap + Google Maps still doesn't work with bug fix

Question

I have a google maps in my html page:

<div class="row">
        <div class="span6">
          <div id="map_canvas"></div>
        </div>
        <div class="span6">
          <h3>Heading</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
       </div>

My javascript map settings:

 var settingsItemsMap = {
    zoom: 11,
    center: new google.maps.LatLng(51.056703, 3.719999),
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), settingsItemsMap );

I know that I have to add this to my css file:

#map_canvas img{
  max-width: none;
}

But I still doesn't show anything! Am I missing something?

Answer 1

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 190; // Calculate the top offset

    $('#map_canvas').css('height', (h - offsetTop));
}).resize();

This did the trick for me!