Google Maps API v3, jQuery UI Tabs, map not resizing

Question

I am using Google Maps API v3, being displayed on a jQuery UI Tab. I have been struggling with triggering my google map to resize correctly when the tab displaying the map is selected. The jQuery documentation here http://docs.jquery.com/UI/Tabs provides that:

For Google maps you can also resize the map once the tab is displayed like this:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

No matter what I try, the above code will not work for me.

The following code works insofar as it will display an alert when I select tab 9. For this reason, I know that at least I am correctly isolating the right trigger event. Here is the code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            alert("Alert is working");
        }                                         
    });
});

When I alter this code to include the recommended resizeMap(); command, it does not work. Instead, what it does is append the characters "#tabs-9" to the end of the url, and then it does not even select the correct tab 9. I cannot even see tab 9 when I use this code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            resizeMap();
        }                                         
    });
});

Finally, when I alter the code to include a different resize command "google.maps.event.trigger(map, 'resize');", it still does not work. Instead, it does allow me to select the correct tab 9, and it does not append the characters to the end of the URL as in the case above, but it will not resize the map. The map still display only partially complete and has gray bands on the right. Here is the code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
           google.maps.event.trigger(map, 'resize');
        }                                         
    });
});

Any ideas what I can try next? I'm stumped. Thanks.

Answer 1

Add the following to your tabs constructor:

$(function() {
    $("#myTabs").tabs({
        show: function(e, ui) {
            if (ui.index == 0) {
                google.maps.event.trigger(myMap, "resize");
            }
        }
    });
});

You should test ui.index for the 0-based index of the panel that contains your Google map, and of course update references to myMap and #myTabs.

See the Events section of the Map object documentation for more information about dispatching a resize event trigger.

Answer 2

I know that this topic is ancient but think that this may be useful to someone.

To avoid rendering problem with jQuery UI Tabs and Google Maps on some of that tabs, you can do following:

//global variables
var gMapsCentralLocation;   //some initial map center location
var mapCenter;              //we will use this to overide your initialy map center so we can "remember" initial viewport when we go back and forth trought tabs
var mapCenterFlag = false;  //indicate if we need to use new google maps viewpoint center, or use initial.
var map;                    //google map

$(document).ready(function () {
    $('#YourTabs').tabs({
        show: function (event, ui) {
            switch (ui.tab.hash) {
                case "#GoogleMapsTab":
                    {
                        preRenderGoogleMaps();
                    }
                    break;
                default:
                    {
                        //to save previous map center when user select some other tab
                        if (map) {
                            mapCenter = map.getCenter();
                        }
                    }
                    break;
            }
        }
    });
    drawRegionOnMap();
});

function preRenderGoogleMaps(){
    //fix rendering issues
    google.maps.event.trigger(map, 'resize');

    if (!mapCenterFlag) {
        map.setCenter(gMapsCentralLocation);
        mapCenterFlag = true;
    } else {
        map.setCenter(mapCenter);
    }
}

function drawRegionOnMap() {
    map = null;    

    var gMapsOptions = {
        zoom: 8,
        center: gMapsCentralLocation,
        //POSSIBLE MAP TYPES (ROADMAP, SATELLITE, HYBRID, TERRAIN)
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), gMapsOptions);
}

Answer 3

I managed to solve this by initialising the map when the map tab is shown and by also editing some css (the css is more than likely a theme related issue).

/* Initialise jQuery UI Tabs */
jQuery(function() {
    jQuery( "#tabs" ).tabs({
      fx: {
        opacity: 'toggle',
        duration: 300
      }
    });
});

/* Redraw the Google Map everytime tab-4 is shown/clicked */
jQuery(function() {
            jQuery( "#tabs" ).bind( "tabsshow", function(event, ui) { 
                if (ui.panel.id == "tabs-4") {
                    var mapOptions = {
                      center: myLatlng,
                      zoom: 13,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                }                                         
            });
});

And then add some CSS to fix the map controls if they are out of place etc.

#map img { max-width:none; }

if max-width of all images is set to 100% you will get problems.

Hope this helps!

Answer 4

First, go to the file where you put the tab template, search for the <li> tag that load your map tab and put this inside:

<li onclick="reloadmap()">

And in the map script right after the

google.maps.event.addDomListener(window, 'load', initialize);

put this:

function reloadmap(){
  //when you resize the map, you lose your zoom and your center
  //so you need to get them again here
    z = map.getZoom();
    c = map.getCenter();
    google.maps.event.trigger(map, 'resize');
  //and set them again here
    map.setZoom(z);
    map.setCenter(c);
}

Answer 5

i resolved by just css

map-tab {width: 100%; height: 300px;float: left;display: block !important;margin: 0px; padding: 0px;}

Then hide the hidden tab :

div[aria-hidden="true"]{position: absolute !important; left: -9999999px;}}