using jquery accordion hides most of googleMap

问题:

I have an accordion widget with 2 tabs. Each of them has a GoogleMap. The first map get properly displayed but when I open the second one, only a portion of the map appears in the viewport.

If I remove the widget by commenting out the following code, both maps are properly displayed.

$("#accordion").accordion({ 
        header: "h3", fillSpace: true, event: "mouseover" 
    });

How can I use this widget while still having both map displayed properly?

Check on http://forums.asp.net/t/1780781.aspx/1?using+jquery+accordion+hides+most+of+googleMap to get the code as it is quite a job to publish it on this site.

thanks a lot!

回答1:

You'll need to observe the change-event of the accordion and trigger the resize-event for the map when it fires.

Example: http://jsfiddle.net/doktormolle/VqzPE/

The example stores the map inside the data of the accordion-content, so you may easy access it when change fires.