Google map + jQuery: rendering bug
Solution 1
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; }
Solution 2
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.
Solution 3
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.
Bobby Jack
I'm a long-time Stack Overflow fan, having followed along with the podcast when the site was still in pre-planning. I was heavily involved in beta-testing in those early days, and made great use of the site. Although it's changed over the years, I'm still following along, keen to help out fellow developers when I can. I also write on my own site, twitter, and contribute stuff to GitHub occasionally.
Updated on July 12, 2022Comments
-
Bobby Jack almost 2 years
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).
-
Bobby Jack almost 15 yearsSounds nice in theory, but doesn't work for me in practice :( (example updated)
-
Bassel Safadi almost 15 yearsyour updated example don't have the problem any more for me, I'm using firefox 3.5 what are you using?
-
Bobby Jack almost 15 yearsFirefox 3.5.1 I'll try in a couple of other browsers - wonder if I've got some caching issues. I'll post a couple of screenshots if the problem persists, just to confirm what it is. Cheers.
-
Bassel Safadi almost 15 yearsI updated to 3.5.1 and I don't see the problem as well, please post the screenshots
-
Bobby Jack almost 15 yearsI actually get an error with this line in IE8: window.attachEvent("onresize", function() {map.onResize()} ); (should that REALLY be 'onResize'?)
-
Bobby Jack almost 15 yearsYup, the display: none is definitely the problem.
-
Bobby Jack almost 15 yearsThat didn't work either (where is the resizeMap function actually defined??) but the other info. on that page helped - thanks!