Google Map in Bootstrap Tab

Google Map in Bootstrap Tab

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:

Solutions/Answers:

Solution 1:

You’re a little overoptimistic in how powerful the “resize” event is. From the documentation:

  • resize: Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, ‘resize’)

In other words, resize won’t do anything fancy like size the map to the window, but will only size it to the container it’s in – in this case, the “map_canvas” div. However, this div has no dimensions, so the map has zero size.

Since you added some listeners to ensure that the map will change to the size of it’s parent, this is a pretty easy fix – just add some code to modify the parent div to the desired size, and the map will resize to it. For example:

$("#map_canvas").css("width", 400).css("height", 400);

will size it to 400×400. Here’s an example, you should be able to change it to whatever you’d like.

Solution 2:

Updated answer for Boostrap 3:

$("a[href='#my-tab']").on('shown.bs.tab', function(){
  google.maps.event.trigger(map, 'resize');
});

Note that you’re selecting the link to the tab, not the tab itself.

Related:  variable @fontAwesomeEotPath_iefix is undefined

Solution 3:

dont use .tab-content > .tab-pane {display: none}
use this

.tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}

Solution 4:

Resize the map when tabs is shown

http://jsfiddle.net/B4zLe/49/

 $('#myTab a[href="#profile"]').on('shown', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng);
 });

Solution 5:

I have the problem also with Google Maps with Bootstrap 3, but i solved the problem with tiny trick base on Andy B code :

 var cl=0;
 $("a[href='#maptab']").on('shown.bs.tab', function(){
     cl++;
     if(cl == 1){   // this is to prevent map initialized twice or more
         initialize();
     }
     else{
        //do nothing        
     }
 });

well.. atleast its work for me 🙂

Solution 6:

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');
        });
        $("#map_canvas").css("height", 400);
    });
});

Fiddle

References