CODEWITHSUNDEEP
firefoxjquery-uigoogle-maps
Luis
Luis

Reputation: 313

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

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

Upvotes: 2

Views: 5767

Answers (5)

mal
mal

Reputation: 1871

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
    });
});

Upvotes: 0

GregPK
GregPK

Reputation: 1242

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

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

Upvotes: 1

Kelvin
Kelvin

Reputation: 8963

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);
    }
});

Upvotes: 1

Chris B
Chris B

Reputation: 15834

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;
}

Upvotes: 7

priestc
priestc

Reputation: 35220

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

Upvotes: 0

Related Questions