jQuery UI + Gmaps = Problems (for me at least) HELP!

Question

I started using jQuery as soon as I found out about it, it is very powerfull but I started struggling when I tried to load Gmaps api into the tabs jQuery UI brings. Strangly enough in IE 6,7,8 it works fine, but in Firefox, Safari (I'm using mac but tested it in windows and they both give the same problems) the map doesn't load entirely. When I click on the tab where the map loads in, only part of the map is fully operational, the rest is grey and not clickable. Please take a look at the link below and click the third tab in firefox/safari and IE and you will see the problem.

http://movewithusoverseas.com/index-new.php?z=product-info.html&pid=1

I don't know if it is a bug in the jQuery UI code or I'm doing something wrong. If I load the map out of the tabs the map is shown OK.

I'm fighting with this problem for a week and a half... any help will be much appreciated.

Thanks in advance. Luis

Chrestomathy

Answer 1

When the user opens the third tab, you need to call map.checkResize().

The problem is this: when you initialize the map, the third tab isn't visible, and the map is sized incorrectly. Try adjusting the size of your browser window (this calls checkResize) and you'll notice that the map corrects itself.

The jQuery UI documentation shows how you can bind an event to the opening of a tab. This should work for your page:

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tabs-3") {
        map.checkResize();
    }
});

Update: Luis points out that you can also solve this problem with the off-left technique:

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

Tubman

how do I have to call the function? <div id='tabs-3' align='center'> <script type='text/javascript'> $(document).ready(function(){ checkResize(); }); </script> <div id='map_canvas' style='width: 600px; height: 400px'></div> </div> Is it ok?? – Chrestomathy

Ok... If go -> movewithusoverseas.com/… and click on the third tab the problem persists.. If I go directly to -> movewithusoverseas.com/… the map is shown ok even without the code you gave to me :S – Chrestomathy

@Chrestomathy - You need to call checkResize on you map object - map.checkResize(). If you link straight to the third tab, it works because the map is initialized when the tab is visible. – Tubman

Finally I've used the css method provided by the jquery doc and it works!! Changing this: .ui-tabs .ui-tabs-hide { display: none !important; } for this: .ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; } Thanks for your help mates!! If I meet you someday remind me that I owe you a beer.. or two! :) – Chrestomathy

Answer 2

I had the same problem with jquery tabs. But I decided not to use css fix, since it replaces original hidden display property of all tabs by moving them outside of the screen. I believe this can be treated as cheating by google or other search engines.

Anyway, I created very similar peace of code to what Chris B submitted above, with one addition, which is map.setCenter(). Because my map was not centered correctly after checkResize() method.

$('#tabs').bind('tabsshow', function(event, ui) {
    if( $('#map').is(':visible') ) {
        map.checkResize();
        map.setCenter(centerPoint, 14);
    }
});

Cobb

Answer 3

Note that the checkResize() function no longer exists in API v3. The equivalent in is:

google.maps.event.trigger(map, 'resize');

Killam

Answer 4

I've had this happen to me before. I haven't gone through your code yet, so I can't diagnose your problem, but for me the problem was the HTML/CSS of the map_canvas div (the one google maps uses to render the map) was being sized wrong. Most likley you have a div within a div and you need to set the inner div to width=100% and height=100%.

Ronrona

<div id='map_canvas' style='width: 600px; height: 400px'></div> Do you think that I have to set it directly to the div?? I'll try... Thanks for your help! – Chrestomathy

I've tried that... but it doesn't work.. It overflows the tabs and it doesn't load the map entirely.. – Chrestomathy

Answer 5

None of provided solutions here worked for me with gmap js. I've found this one does:

jQuery('a[href="#tabID"]').on('shown.bs.tab', function(e)
{
    var map = new GMaps({
        div: '#gmap-marker',
        lat: -12.043333,
        lng: -77.028333
    });
});

Dupery