Twitter Bootstrap & Google Maps

Question

I have a navbar and 100% x 100% google map in my app. I would like to add a sidebar on the right with different filters. Reason for adding it on the right side is because of better experience on smaller screens as the right content is pushed below.

The map renders full screen with fluid (%) values when I just add the map after the last nav bar div, like this:

Map is visible:

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

Map is not visible if I try to add it inside a span to control the size of it and add a side bar.

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

I don't want to add a fixed value to the map, since it defeats the purpose of fluid.

Thanks in advance for any tips on how I can make the map visible inside a container-fluid.

This layout looks fine, maybe you have defined size, border, margin or padding value in your CSS? If not, you may try to remove "well" class in your list, if that's the problem, simply write an inner wrapper div as child of `nav nav-list` — Umur Kontacı, Mar 09 '12 at 12:32
Got the answer here. The height of the map was set to zero. Link to answer. https://github.com/twitter/bootstrap/issues/2475 — Epalissad, Mar 10 '12 at 13:10

score 14 · Accepted Answer · edited Aug 02 '13 at 12:23

14

Posted the answer I found as comment before, but to make it more visible, here is the answer: https://github.com/twbs/bootstrap/issues/2475

You must add a javascript callback that will manually set the height of the map-canvas when the window is resized, for example.

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

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

edited Aug 02 '13 at 12:23

dafyk

1,042
12
24

answered Apr 28 '12 at 09:07

Epalissad

441
2
7
15

[New repo introduced with release of Bootstrap 3 RC1](http://blog.getbootstrap.com/2013/07/27/bootstrap-3-rc1/) – dafyk Aug 02 '13 at 12:25

score 1 · Answer 2 · edited Dec 19 '14 at 11:19

I have done it already.

First time I try with same as your problem. A GPS map in bootstrap content-tab. And I just load or initial map with tab click event by something like this.

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

Twitter Bootstrap & Google Maps

2 Answers2

Linked