Bootstrap: Google Map tidak muncul saat berada di dalam container-fluid

Dibuat pada 9 Mar 2012 · 3Komentar · Sumber: twbs/bootstrap

Hai,
Saya memiliki navbar dan 100% x 100% google map di aplikasi saya. Saya ingin menambahkan sidebar di sebelah kanan dengan filter yang berbeda. Alasan menambahkannya di sisi kanan adalah karena pengalaman yang lebih baik di layar yang lebih kecil.

Peta merender layar penuh dengan nilai fluid (%) ketika saya baru saja menambahkan peta setelah div bar nav terakhir, seperti ini:

Peta terlihat:

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

Peta tidak terlihat jika saya mencoba menambahkannya di dalam rentang untuk mengontrol ukurannya dan menambahkan bilah samping.

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

Saya tidak ingin menambahkan nilai tetap ke peta, karena itu mengalahkan tujuan fluid.

Terima kasih sebelumnya!

Sumber

fohlsom

Komentar yang paling membantu

Tidak dapat melakukannya karena peta akan memiliki ketinggian 0. Anda harus menambahkan panggilan balik javascript yang akan mengatur ketinggian kanvas peta secara manual saat jendela diubah ukurannya, misalnya.

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

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

BenjiZombie pada 9 Mar 2012

👍4

Semua 3 komentar

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

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

BenjiZombie pada 9 Mar 2012

👍4

@BenjiZombie - Terima kasih! Ini menyelesaikannya!

fohlsom pada 10 Mar 2012

Terima kasih! Setelah 10 saran berbeda yang satu ini bekerja dengan cepat dan mudah!