Bootstrap: Google मानचित्र नहीं दिखा रहा है जब एक कंटेनर-तरल पदार्थ में

नमस्ते,
मेरे पास मेरे ऐप में एक नावबार और 100% x 100% Google मानचित्र है। मैं अलग फिल्टर के साथ दाईं ओर एक साइडबार जोड़ना चाहूंगा। इसे दाईं ओर जोड़ने का कारण छोटे स्क्रीन पर बेहतर अनुभव है।

नक्शा तरल पदार्थ (%) मानों के साथ पूर्ण स्क्रीन प्रस्तुत करता है जब मैं पिछले नेवी बार div के बाद नक्शा जोड़ता हूं, जैसे:

नक्शा दिखाई दे रहा है:

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

मैं मानचित्र में एक निश्चित मान नहीं जोड़ना चाहता, क्योंकि यह द्रव के उद्देश्य को हरा देता है।

अग्रिम में धन्यवाद!