Twitter Bootstrap i Google Maps

Question

Mam navbar i 100% x 100% mapy google w mojej aplikacji. Chciałbym dodać pasek boczny po prawej stronie z różnymi filtrami. Powodem dodania go po prawej stronie jest to, że na mniejszych ekranach widać lepsze wrażenia, ponieważ odpowiednia zawartość jest zepchnięta poniżej.

Mapa świadczy pełny ekran płynem (%) wartości po prostu dodać mapę po ostatnim nav bar div tak:

mapa jest widoczna:

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

mapa nie jest widoczna jeśli spróbuję dodać go wewnątrz przęsła, aby kontrolować jego rozmiar i dodać pasek boczny.

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

Nie chcę dodawać stałej wartości do mapy, ponieważ pokonuje ona cel płynu.

Z góry dziękuję za wszelkie wskazówki, w jaki sposób mogę sprawić, aby mapa była widoczna wewnątrz płynu w pojemniku.

Answer 1

Wysłany odpowiedź znalazłem w komentarzu wcześniej, ale aby uczynić go bardziej widoczne, oto odpowiedź: https://github.com/twbs/bootstrap/issues/2475

Należy dodać javascript zwrotnego, który będzie ręcznie ustawić wysokość MAP-płótnie kiedy na przykład zmienisz rozmiar okna.

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

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

Answer 2

Zrobiłem go już.

Pierwszy raz próbuję z tym samym, co Twój problem. Mapa GPS w zakładce zawartości początkowej. Po prostu wczytuję lub inicjuję mapę za pomocą zdarzenia kliknięcia na zakładkę przez coś podobnego.

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