Twitter Bootstrap & Google Maps

Question

У меня есть навигационная панель и 100% x 100% карта google в моем приложении. Я хотел бы добавить боковую панель справа с разными фильтрами. Причина добавления его с правой стороны - это лучший опыт работы на более мелких экранах, поскольку подходящий контент подталкивается ниже.

Карта предоставляет полный экран со значениями жидкостей (%), когда я просто добавить карту после бара DIV последних навигационного, как это:

Карты видна:

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

Карты не видно если я попытаюсь добавить его внутри пролета, чтобы контролировать его размер и добавить боковую панель.

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

Я не хочу добавлять фиксированное значение к карте, так как оно побеждает цель жидкости.

Заранее благодарим за любые советы о том, как сделать карту видимой внутри контейнерной жидкости.

Answer 1

Добавлено ответ я нашел как комментарий раньше, но чтобы сделать его более видимым, вот ответ: https://github.com/twbs/bootstrap/issues/2475

Вы должны добавить яваскрипта обратного вызова, который будет вручную установить высоту карты-холст например, при изменении размера окна.

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

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

Answer 2

Я сделал это уже.

Впервые попробовал так же, как и вашу проблему. Карта GPS в загрузочном содержимом-вкладке. И я просто загружаю или начинаю карту с событием щелчка табуляции чем-то вроде этого.

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(); 
      }); 
    });