Bootstrap: لا تظهر خرائط Google عندما تكون في سائل حاوية

أهلا،
لدي شريط التنقل وخريطة Google بنسبة 100٪ × 100٪ في تطبيقي. أود إضافة شريط جانبي على اليمين بفلتر مختلف. سبب إضافته على الجانب الأيمن هو تجربة أفضل على الشاشات الأصغر.

تعرض الخريطة ملء الشاشة بقيم مرنة (٪) عندما أقوم فقط بإضافة الخريطة بعد قسم شريط التنقل الأخير ، مثل هذا:

الخريطة مرئية:

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

لا أريد إضافة قيمة ثابتة إلى الخريطة ، لأنها تتعارض مع الغرض من السوائل.

شكرا لك مقدما!