Bootstrap: El mapa de Google no se muestra cuando está en un contenedor de líquido
Hola,
Tengo una barra de navegación y un mapa de Google 100% x 100% en mi aplicación. Me gustaría agregar una barra lateral a la derecha con un filtro diferente. La razón para agregarlo en el lado derecho se debe a una mejor experiencia en pantallas más pequeñas.
El mapa muestra la pantalla completa con valores fluidos (%) cuando solo agrego el mapa después del último div de la barra de navegación, así:
El mapa es visible:
<div class="navbar">
<nav bar stuff......>
</div>
<div id="map-canvas"></div>
El mapa no es visible si trato de agregarlo dentro de un intervalo para controlar su tamaño y agregar una 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>
No quiero agregar un valor fijo al mapa, ya que frustra el propósito de fluido.
¡Gracias por adelantado!
fohlsom
Todos 3 comentarios
No puedo hacerlo porque el mapa tendrá una altura de 0. Debe agregar una devolución de llamada javascript que establecerá manualmente la altura del lienzo del mapa cuando se cambie el tamaño de la ventana, por ejemplo.
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 60; // Calculate the top offset
$('#map-canvas').css('height', (h - offsetTop));
}).resize();
BenjiZombie
en 9 mar. 2012
@BenjiZombie - ¡Gracias! ¡Esto lo resolvió!
fohlsom
en 10 mar. 2012
¡Gracias! ¡Después de 10 sugerencias diferentes, esta funciona rápida y fácilmente!
rudi911
en 4 nov. 2012
Temas relacionados
andyyou
·
3Comentarios
MrCsabaToth
·
3Comentarios
cvrebert
·
3Comentarios
tiendq
·
3Comentarios
eddywashere
·
3Comentarios
Comentario más útil
No puedo hacerlo porque el mapa tendrá una altura de 0. Debe agregar una devolución de llamada javascript que establecerá manualmente la altura del lienzo del mapa cuando se cambie el tamaño de la ventana, por ejemplo.