Google Maps in Navbar in Bootstrap 3

Question

I just migrated from Bootstrap 2 to Bootstrap 3. I know displaying Google maps in Bootstrap is tricky, and it took me a while to get it working with Bootstrap 2, but now I am lost again.

There are related questions about this topic, see e.g. the following links, but as one can see the problem seems multi-layered, as the answers differ widely:

Showing a Google Map in a modal created with Twitter Bootstrap

Bootstrap 3.0 and Google maps javascript API V3 styling

I think my code is pretty standard:

<nav class="navbar navbar-default navbar-fixed-bottom visible-xs" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#lowerNavBar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse  visible-xs" id="lowerNavBar">
        <ul class="nav navC navbar-nav">
            <li id ="listTab" class="active"><a href="#listTabContent" data-toggle="tab">List</a></li>
            <li id ="mapTab"><a href="#mapTabContent" data-toggle="tab">Map</a></li>
        </ul>
    </div>
</nav>

<div class="tab-content">
    <div class="tab-pane active" id="listTabContent">
        <div class="container" id="postsGoHere">
        </div>
    </div>
    <div class="tab-pane" id="mapTabContent">
        <div id="mapCanvas" class="google-map-canvas"></div>
    </div>
</div>

So, my question would be: What precisely does one have to do to get to the point where the map displays correctly? I tried both solutions above in insulation and together, but to no available. I am currently having the 'grey box' result with a partial map being displayed in the upper left part of the screen.

Answer 1

Finally I found something that works:

$("#mapTab").on("shown.bs.tab", function () {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

The difference between Bootstrap 2 to Bootstrap 3 is that the event needs to be changed from "shown" to "shown.bs.tab".

Answer 2

$(".navbar-toggle").on("click", function () {       
    setTimeout(
      function() 
      {
        initialize();
      }, 500);
});