Bootstrap Twitter e Google Maps

Question

Nella mia app ho una mappa di navigazione e una mappa google 100% x 100%. Vorrei aggiungere una barra laterale sulla destra con diversi filtri. Il motivo per aggiungerlo sul lato destro è dovuto alla migliore esperienza su schermi più piccoli, dato che il contenuto giusto viene spinto di seguito.

La mappa intonaci a schermo intero con un liquido (%) i valori quando ho appena aggiungo la mappa dopo l'ultima barra di navigazione div, in questo modo:

Map è visibile:

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

Mappa non è visibile se provo ad aggiungerlo all'interno di una span per controllarne la dimensione e aggiungere una barra laterale.

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

Non voglio aggiungere un valore fisso alla mappa, poiché elimina lo scopo del fluido.

Grazie in anticipo per eventuali suggerimenti su come rendere visibile la mappa all'interno di un contenitore-fluido.

Answer 1

Pubblicato la risposta che ho trovato come commento prima, ma per renderlo più visibile, ecco la risposta: https://github.com/twbs/bootstrap/issues/2475

è necessario aggiungere un javascript callback che imposterà manualmente l'altezza della mappa-canvas quando la finestra viene ridimensionata, per esempio.

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

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

Answer 2

ho già fatto.

La prima volta provo con lo stesso problema. Una mappa GPS nella scheda del contenuto del bootstrap. E ho appena caricato o mappa iniziale con evento click su scheda di qualcosa di simile.

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