Twitter Bootstrap & Google Maps

Question

Tôi có một thanh điều hướng và 100% x 100% bản đồ google trong ứng dụng của tôi. Tôi muốn thêm thanh bên ở bên phải với các bộ lọc khác nhau. Lý do thêm nó ở bên phải là vì trải nghiệm tốt hơn trên màn hình nhỏ hơn khi nội dung phù hợp được đẩy bên dưới.

Bản đồ làm cho toàn màn hình với chất lỏng (%) giá trị khi tôi chỉ cần thêm bản đồ sau khi nav cuối cùng thanh div, như thế này:

Bản đồ có thể nhìn thấy:

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

Bản đồ không hiển thị nếu tôi cố gắng thêm nó trong một khoảng để kiểm soát kích thước của nó và thêm một thanh bên.

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

Tôi không muốn thêm giá trị cố định vào bản đồ vì nó đánh bại mục đích của chất lỏng.

Cảm ơn trước vì đã có bất kỳ mẹo nào về cách tôi có thể làm cho bản đồ hiển thị bên trong bình chứa.

Answer 1

văn câu trả lời tôi thấy như bình luận trước đó, nhưng để làm cho nó rõ ràng hơn, đây là câu trả lời: https://github.com/twbs/bootstrap/issues/2475

Bạn phải thêm một callback javascript rằng sẽ tự thiết lập chiều cao của bản đồ vải khi cửa sổ được thay đổi kích thước, ví dụ.

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

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

Answer 2

Tôi đã làm điều đó rồi.

Lần đầu tiên tôi thử với cùng một vấn đề của bạn. Bản đồ GPS trong tab nội dung bootstrap. Và tôi chỉ tải hoặc bản đồ ban đầu với sự kiện nhấp chuột tab bằng một cái gì đó như thế này.

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