Google Maps and jQuery Tabs

Question

I have slight problem with Google maps included in simple jQuery Tabs.

Below I pasted the code:

jQuery:

$(document).ready(function() {

             


        

Answer 1

Initialising the map when the tab is opened is definitely the way to go. If you try to initialise the map on a hidden div, then it will fail to display. Whatever function you have that 'shows' your div, use that function to initialise the map AFTER the div has been shown.

if( !maploaded && $("#" +tab2id+ "content").hasClass("map") ) {
    LoadGoogleMap();
    maploaded = true;
}

Once the map has been loaded, you can safely hide or show the div again without any problems, so it's worth adding a flag to check whether it's already been loaded.