Twitter Bootstrap & Google Maps

Question

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.

The map renders full screen with fluid (%) values when I just add the map after the last nav bar div, like this:

Map is visible:

<div class="navbar">
    <nav bar stuff......>
</div>
<div id="map-canvas"></div>

Map is not visible if I try to add it inside a span to control the size of it and add a side bar.

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div id="map-canvas"></div>
        </div>
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Sidebar</li>
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

I don't want to add a fixed value to the map, since it defeats the purpose of fluid.

Thanks in advance for any tips on how I can make the map visible inside a container-fluid.

Answer 1

Posted the answer I found as comment before, but to make it more visible, here is the answer: https://github.com/twbs/bootstrap/issues/2475

You must add a javascript callback that will manually set the height of the map-canvas when the window is resized, for example.

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

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

Answer 2

I have done it already.

First time I try with same as your problem. A GPS map in bootstrap content-tab. And I just load or initial map with tab click event by something like this.

var map = undefined;
var marker = undefined;
var position = [13.821805500000002, 100.84968549999999];
var latlng;

function initialize() {

    latlng = new google.maps.LatLng(position[0], position[1]);
    var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: true,
        title: "Your current location!"
    });

    google.maps.event.addListener(marker, 'drag', function() {
        $('#txtlat').val(marker.position.lat());
        $('#txtlng').val(marker.position.lng());
    }
    );
}

    $(document).ready(function() {
          $("div.tabbable ul.nav  a[href=#gps_tab]").bind('click', function() {
                  initialize();
                 $("#map_canvas").show();
           });
    });