Google Maps v3 and JQuery Tabs (jQuery tabs google maps bug)

If you are struggling against some problems with google maps and tabs be aware that, in order to avoid problems, jQuery sets the width & height of every hidden element to Zero.

To fix this problem all you have to do is trigger the resize event and the map will be working as it should.
To trigger the event all you need to do is:

google.maps.event.trigger(map, ‘resize’);

You should use the “show” method of your tabs in order to trigger the event, need an example?

$(‘#tabs’).tabs({
fx: { opacity: ‘toggle’, duration: 1000 },
show: function (event, ui) {
google.maps.event.trigger(map, ‘resize’);
}
});

Dont forget to change the “map” variable to your map object holder.

Open Source Junior Developer

Posted on July 21, 2011 by Diogo Raminhos This entry was posted in JQuery, Open-Source, Software and tagged google, google maps, jquery, jquery and google maps, maps, maps problem. Bookmark the permalink.

3 Responses to “Google Maps v3 and JQuery Tabs (jQuery tabs google maps bug)”

Leave a Reply