Bootstrap: Google Map not showing when in a container-fluid

Created on 9 Mar 2012 · 3Comments · Source: twbs/bootstrap

Hi,
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 filter. Reason for adding it on the right side is because of better experience on smaller screens.

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!

Source

fohlsom

Most helpful comment

Can't do it since the map will have a height of 0. 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();

BenjiZombie on 9 Mar 2012

👍4

All 3 comments

Can't do it since the map will have a height of 0. 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();

BenjiZombie on 9 Mar 2012

👍4

@BenjiZombie - Thanks! This solved it!

fohlsom on 10 Mar 2012

Thanks! After 10 different suggestions this one works quick and easily!