Problems with Google Maps and jQuery accordion

I'm having a problem, which was already described here, but I didn't find a way to solve it. The problem is I'm using this jQuery snippet for accordion: ``` $(document).ready(function() { $('#accordion > li > div.ac-inner').click(function(){ if(false == $(this).next().is(':visible')) { $('#accordion ul').slideUp(300); } $(this).next().slideToggle(300); }); //$('#accordion ul:eq(0)').show() }); ``` And with this HTML I'm loading Google Map: ``` <ul id="accordion"> <li id="acc-1"><div class="ac-inner"><h3>Tab 1</h3></div> <ul> <li><div><!-- Map goes here --></div></li> </ul> </li> <li id="acc-2"><div class="ac-inner"><h3>Tab 2</h3></div> <ul> <li><!-- Content goes here --></li> </ul> </li> <li id="acc-3"><div class="ac-inner"><h3>Tab 3</h3></div> <ul> <li><!-- Content goes here --></li> </ul> </li> </ul> ``` This is my CSS: ``` #accordion { list-style: none; padding: 0; width: 527px; } #accordion li { background: none; padding-left: 0; } #accordion div.ac-inner { display: block; cursor: pointer; margin-bottom: 10px; padding: 0 7px; border: 1px solid #ddd; background: #F5F5F5; /* Old browsers */ background: -moz-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#F5F5F5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(top, #FAFAFA 0%,#F5F5F5 100%); /* IE10+ */ background: linear-gradient(top, #FAFAFA 0%,#F5F5F5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAFAFA', endColorstr='#F5F5F5',GradientType=0 ); /* IE6-9 */ border-radius: 5px; box-shadow: 0 1px 0 #fff inset; -moz-box-shadow: 0 1px 0 #fff inset; -webkit-box-shadow: 0 1px 0 #fff inset; text-shadow: 0 1px 0 #fff; -moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; } #accordion ul { list-style: none; padding: 0 0 0 0; } #accordion ul { display: none; } #accordion ul li { font-weight: normal; cursor: auto; background-color: #fff; padding: 0 0 0 7px; } #accordion a { text-decoration: none; } #accordion a:hover { text-decoration: underline; } #accordion #acc-1 div.ac-inner { background: url(../images/icons/map.png) no-repeat 0 0 #F5F5F5; text-indent: 70px; } #accordion #acc-2 div.ac-inner{ background: url(../images/icons/calendar.png) no-repeat 0 0 #F5F5F5; text-indent: 70px; } #accordion #acc-3 div.ac-inner { background: url(../images/icons/camera.png) no-repeat 0 0 #F5F5F5; text-indent: 70px; } ``` Google says this is a problem because of the CSS rule display: none; so the map is rendered partially (with grey blocks over) and is not centered. Is it possible just to adapt upper jQuery snippet to get this thing working or would I have to touch Google Map loading script (which is loaded dynamically through CMS plugin)?