Twitter Bootstrap & Google Maps

J'ai une barre de navigation et 100% x 100% google map dans mon application. Je voudrais ajouter une barre latérale sur la droite, avec différents filtres. Raison pour l'ajouter sur le côté droit est en raison d'une meilleure expérience sur des écrans plus petits que le bon contenu est poussé ci-dessous.

La carte rend en plein écran avec le fluide (%) valeurs lorsque je viens d'ajouter la carte après la dernière barre de navigation div, comme ceci:

Carte est visible:

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

Carte n'est pas visible si j'essaie de l'ajouter à l'intérieur d'un laps de contrôler la taille de celui-ci et ajouter une barre latérale.

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

Je ne veux pas ajouter une valeur fixe à la carte, car il défait le but de liquide.

Merci d'avance pour les conseils sur comment je peux faire la carte visible à l'intérieur d'un conteneur de fluide.

Cette disposition a l'air bien, peut-être que vous avez défini la taille, bordure, marge ou à la valeur de remplissage dans votre CSS? Si non, vous pouvez essayer de supprimer le "bien" de la classe dans votre liste, si c'est ça le problème, il suffit d'écrire un emballage intérieur div comme enfant de nav nav-list
J'ai la réponse ici. La hauteur de la carte est fixé à zéro. Lien vers la réponse. github.com/twitter/bootstrap/issues/2475

OriginalL'auteur Epalissad | 2012-03-09

  1. 14

    Posté la réponse, j'ai trouvé que les commentaires avant, mais pour le rendre plus visible, voici la réponse: https://github.com/twbs/bootstrap/issues/2475

    Vous devez ajouter un javascript de rappel qui permettra de régler manuellement la hauteur
    de la carte de la zone de travail lorsque la fenêtre est redimensionnée, par exemple.

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

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();
    le lien vers github ne fonctionne plus
    Nouveau repo introduit avec la version de Bootstrap 3 RC1

    OriginalL'auteur Epalissad

  2. 1

    J'ai déjà fait.

    Première fois que j'ai essayer avec le même que celui de votre problème. Une carte GPS dans le bootstrap contenu de l'onglet.
    Et je viens de le charger ou de l'initiale de la carte à onglet, cliquez sur l'événement par quelque chose comme cela.

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

    OriginalL'auteur TJKing