I'm trying to get a Google Map to appear in a vanilla Bootstrap tab. I built a fiddle taken directly from the Bootstrap docs, with the Gmap script pretty much exactly like Google recommends doing it too.

I am dumping the map object to console.dir and it has been initialized properly. In earlier projects I'd been able to display maps in tabs using the resize function-- but it doesn't seem to work with Bootstrap.

Has anyone gotten this working?

Here's the generic jsfiddle-- http://jsfiddle.net/B4zLe/4/

EDIT: adding code

JAVASCRIPT:

var map;



jQuery(function($) {

    $(document).ready(function() {

        var latlng = new google.maps.LatLng(-34.397, 150.644);

        var myOptions = {

            zoom: 8,

            center: latlng,

            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        map = new google.maps.Map(document.getElementById(map_canvas), myOptions);

        console.dir(map);

        google.maps.event.trigger(map, 'resize');



        $('a[href=#profile]').on('shown', function(e) {

            google.maps.event.trigger(map, 'resize');

        });

    });

});

HTML:

<div>

<div class=bs-docs-example>

    <ul id=myTab class=nav nav-tabs>

    <li class=active><a href=#home data-toggle=tab>Home</a></li>

    <li><a href=#profile data-toggle=tab>Map</a></li>

</ul>

<div id=myTabContent class=tab-content>

    <div class=tab-pane fade in active id=home>

        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>

    </div>

    <div class=tab-pane fade id=profile>

        <div id=map_canvas></div>   

    </div>

</div>