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!
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 - Obrigado! Isso resolveu tudo!
Obrigado! Após 10 sugestões diferentes, este funciona de forma rápida e fácil!
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.