Google map + jQuery: rendering bug

css, google-maps, jquery, jquery-ui

Solution

Try calling `map.onResize()` after you show the map each time.

It may not work fine if it is called when the map is hidden using display:none since it would have zero height and width.

Problem

When placing a google map inside a jquery-ui tab, the map fails to display properly in certain circumstances. To reproduce: - Go here - Click the 'list' link - Resize the browser window - Click the 'map' link Observe that some of the place name overlays draw properly, but others do not. I've actually stripped out all of the jquery-ui stuff to limit the scope of the problem, and it appears to be just the application of display:hide/display:block that causes the problem. UPDATE The bug also occurs, occasionally, just when toggling between display:none/block - e.g. no resizing occurs. This seems to be most common in IE(8).

Original source