Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google map + jQuery: rendering bug

When placing a google map inside a jquery-ui tab, the map fails to display properly in certain circumstances. To reproduce:

  1. Go here
  2. Click the 'list' link
  3. Resize the browser window
  4. 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).

like image 758
Bobby Jack Avatar asked Jul 19 '09 16:07

Bobby Jack


3 Answers

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.

like image 181
Chetan S Avatar answered Oct 14 '22 02:10

Chetan S


From the online docs:

Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}
like image 20
Bobby Jack Avatar answered Oct 14 '22 01:10

Bobby Jack


Using the jQuery Google Maps plugin is was having the same issue with jQuery UI tabs.

The map is created like this:

$("#google-map").googlemap({
    controls: false,
    labels: true,
    zoom: 9,
    latitude: 51.5,
    longitude: 0,
    debug: false
});

It was solved very easily (but not quickly) by calling

$("#google-map").googlemap().getMap().checkResize();

After the map div is displayed. I have tested this on FF and Safari, in addition

resizeTo(screen.width, screen.height);

Works in FF but not IE or Safari.

like image 31
Richard Stelling Avatar answered Oct 14 '22 01:10

Richard Stelling