Google Map not loading properly inside Bootstrap tab

Question

I'm using iProperty to create tabs with content for different property owners.

I have hacked the core files a lot to get the site looking and functioning how I want it, but I'm having a problem with the maps in the tabs.

If you look at the below page, and then click the Location tab, you will see the problem whereby it only loads a small portion of the map. Incidentally, the problem disappears if you resize the browser while the map tab is active, so I think there is some issue when the map initially loads.

http://red-ferndevelopment.co.uk/OfficeExperts/index.php?option=com_iproperty&view=property&id=90&Itemid=318

If anyone could help, I'd be more than grateful.

Many thanks, Austin

Answer 1

First the reason re sizing fixes it is that the map checks that everything is "correct" on browser resize. Since the tab is hidden by default the size of the map is smaller until the tab is opened, but no event is getting sent to the map to notify of the change. I have seen similar problems with google maps before and its not really a problem, just something that can get missed easily.

There are a couple of fixes for that, the first is by calling map.checkResize() when the tab is opened. Though given it is a third party component that may not be easy, but if core modifications have already been made that may not be a problem. Replace map with the actual variable for the map.

The second, easier way to "trick" it without actually touching it is to simply do something like this:

jQuery('a[href="#propmap"]').on('click',function(){
   jQuery(window).trigger('resize');
});

You can place that anywhere (as long as its after the DOM has loaded of course) and it should fix it. It triggers a resize event automatically when the tab is clicked so it should force the map to work without a manual resize.

The first suggestion is the best as it is not any kind of "hack" but the second should work no matter what.

Answer 2

Bootstrap tabs (and carousels and modals) are initially set to display none, until they become active, so the parent element of your map has height / width of 0.

The best way to resolve this is to call your map script after the tab has been displayed, not on document ready. On document ready, there is nothing to load your map into as far as the browser is concerned.

Bootstrap provides a method to do this with the shown.bs.tab event http://getbootstrap.com/javascript/#tabs

So, you simply need something like this that instantiates the map after the tab has finished being displayed:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Your Google map code here
});

Answer 3

Seth Warburton wrote: Bootstrap tabs (and carousels and modals) are initially set to display none, until they become active, so the parent element of your map has height / width of 0.

I had the same problem with Bootstrap3 as you. finally I ended up with the simple CSS solution.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

Answer 4

You can add this css declaration to prevent conflict Bootstrap/Google Map (if id of your map is #map). In some cases, it solves the issue:

#map img {
    max-width: none;
}

But, you may have to load map script only when tab is displayed.

$('a[href="#propmap"]').on('shown', function() {
    // When tab is displayed... will run google map code
    // Your Google map code here
}

Hope this can help!