7

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).

Bobby Jack
  • 15,689
  • 15
  • 65
  • 97
  • Is this for Google Maps API v2 or v3? I've been working with v3 and have been having similar problems, but haven't yet been able to solved them 100%. – Matt Ball Sep 14 '09 at 22:52
  • I solved that problem let's have a look on http://stackoverflow.com/a/13380866/1823525 – Coder Apr 10 '13 at 21:50

4 Answers4

3

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.

Chetan S
  • 23,637
  • 2
  • 63
  • 78
3

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;
}
Bobby Jack
  • 15,689
  • 15
  • 65
  • 97
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.

Richard Stelling
  • 25,607
  • 27
  • 108
  • 188
0

try this:

  if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()} );
  } else {
    window.addEventListener("resize", function() {this.map.onResize()} , false);
  }

after 

map_initialize();

because you have to tell the map that the page is resized, maybe that's the problem you are having not a jquery one

EDIT

Ok remove the

if (window.attachEvent) { 
            window.attachEvent("onresize", function() {map.onResize()} );
        } else {
            window.addEventListener("resize", function() {map.onResize()} , false);
        }

and replace your 

$('#map').show();

with:

 $("#map").show(1, function () {
          resizeMap();
        });

resizeMap() will call Google Maps' checkResize() on the particular map.

source: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

Bassel Safadi
  • 487
  • 1
  • 3
  • 11
  • Sounds nice in theory, but doesn't work for me in practice :( (example updated) – Bobby Jack Jul 19 '09 at 17:21
  • your updated example don't have the problem any more for me, I'm using firefox 3.5 what are you using? – Bassel Safadi Jul 19 '09 at 17:32
  • Firefox 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. – Bobby Jack Jul 19 '09 at 18:29
  • I updated to 3.5.1 and I don't see the problem as well, please post the screenshots – Bassel Safadi Jul 19 '09 at 18:35
  • I actually get an error with this line in IE8: window.attachEvent("onresize", function() {map.onResize()} ); (should that REALLY be 'onResize'?) – Bobby Jack Jul 19 '09 at 18:38
  • That didn't work either (where is the resizeMap function actually defined??) but the other info. on that page helped - thanks! – Bobby Jack Jul 19 '09 at 21:17