Google Maps Not Working in jQuery Tabs

Question

Google maps not working when placed inside jQuery tabs is a question that\'s all over the web. In my research so far none of the solutions seem to work. Hopefully someone he

Answer 1

Try this in the css:

.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) {
 display: block;
 height: 0;
 overflow-y: hidden;
}

Answer 2

The problem (as stated above and in other places) is that the map div must be visible in order to work. So load the map in a tab that is visible. Then if you wish, change to the tab you want to display.

To do this I added a one-time event listener to the map. Inside that function I changed to the first tab. During the load, you do see the map area for about a second before the tab is changed. The advantage is that the user has to do nothing for this to work.

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     $("#Tabs").tabs('select',0);
});

Answer 3

No of the above answers are completely correct. The problem occurs because the map canvas is set to width:0; height:0 by default before loading and then expects you to either pass the dimension or get the dimensions from the parent, as this is inside jQuery tabs there are no dimensions.

As mentioned above bind to the click event of your tab and set the map_canvas dimension then call the google.maps.event.trigger()

 $(function(){

$('#maptab').bind('click',function() {
            var w = $('#map_view').width();
            var h = $('#map_view').height();
            $('#map_canvas').css({ width: w, height: h });
           google.maps.event.trigger(map, 'resize');

        });

});

Answer 4

I had the same problem and here is my solution.

I added the ajaxComplete function that is triggered when all ajax request or posts are finished.

<script type="text/javascript">   
   $(document).ajaxComplete(function(e){
         calculateRoute("from","to");            
   });        
</script>      

Answer 5

I abandoned the plugins and went with the google maps shortcode that has been released for the theme I'm using. While I lose the custom markers functionality, the theme developers were finally able to help get this all working. They added the following code to the shortcode PHP file.

jQuery('ul.tabs_framed').data('tabs').onClick(function(e,index) {
    resizeMap(" . 'map'.$map_id .") 
});
function resizeMap(m) {
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
};

This code triggers a map reload when the tab containing the map is clicked. It also recenters the map. This solution solved the problem for me and the google maps now display in the jquery tabs. Hopefully some of the more javascript-savvy users here (and plugin developers!!!) can adapt this solution to their own maps-in-tabs issues.

Answer 6

Before I have the same problem for implementing google-map inside tabs, specially when the map is not in the first selection. But I have tried and it's work with a simple solution like this :

Make a simple js function :

<script type="text/javascript">

function ResetMap() {
google.maps.event.trigger(map, 'resize');
}

</script>


<li><a href="#tab1">Select Tab1</a></li>
<li onClick="ResetMap();"><a href="#tab2">Select Google Map</a></li>

<div class="tab1-content" id="tab1">Content tab1</div>
<div class="tab2-content" id="tab2"><?php include_once ('google-map.php') ?></div>