Bootstrap: O mapa do Google não aparece quando em um fluido de contêiner

Criado em 9 mar. 2012 · 3Comentários · Fonte: twbs/bootstrap

Oi,
Eu tenho uma barra de navegação e 100% x 100% google map em meu aplicativo. Eu gostaria de adicionar uma barra lateral à direita com filtro diferente. A razão para adicioná-lo no lado direito é devido à melhor experiência em telas menores.

O mapa é renderizado em tela cheia com valores fluidos (%) quando eu apenas adiciono o mapa após o último div da barra de navegação, assim:

O mapa está visível:

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

O mapa não fica visível se eu tento adicioná-lo dentro de uma extensão para controlar o tamanho dele e adicionar uma barra lateral.

    <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>

Não quero adicionar um valor fixo ao mapa, pois isso anula o propósito do fluido.

Desde já, obrigado!

Fonte

fohlsom

Comentários muito úteis

Não posso fazer isso, pois o mapa terá uma altura de 0. Você deve adicionar um retorno de chamada javascript que irá definir manualmente a altura da tela do mapa quando a janela for redimensionada, por exemplo.

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

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

BenjiZombie em 9 mar. 2012

👍4

Todos 3 comentários

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

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

BenjiZombie em 9 mar. 2012

👍4

@BenjiZombie - Obrigado! Isso resolveu tudo!

fohlsom em 10 mar. 2012

Obrigado! Após 10 sugestões diferentes, este funciona de forma rápida e fácil!