Tuesday, April 29, 2008

jQuery UI tabs and jMap with Seagull

Today I came accross a weird problem while tried to put together a pimped-up profile page with jQuery tabs and a google map inside one of tabs.

jMap is a jQuery plugin for handling Google Maps.

UI is user interface plugin for jQuery which among others handles tabbed controlls.

Problem :
If you embed a jMap map inside a UI tab the map wont be rendered correctly (it isnt centered correctly, some sections of map wont be loaded). When you place the div containing the map out of the tab it loads just fine. Obviously jQuery magic goes wrong somewhere, as the map is functioning correctly, you have controlls and if you move it around it loads some (not all visible) sections so it must be some width/height/padding/margin but I wasnt able to debug what is going on in the background, too much things happen at once.

Solution:
It DOES matter in which order you set up jQuery objects. First you have to set up the map, then set up UI Tabs and it works like a charm.

The code should be something like this (if you wander about {} enclosed stuff which are not JSON notation, its how you can reference php variables in JS with Flexy in Seagull):

{scriptOpen:h}
$(document).ready(function(){
$('#map').jmap('init', {
mapCenter:[{aGeoCodes[longitude]},{aGeoCodes[latitude]}],
mapZoom: 15,
mapShowjMapIcon: false
});
$('#map').jmap("addMarker", {pointLatLng:[{aGeoCodes[longitude]},{aGeoCodes[latitude]}]});
$("#tabbedProfile > ul").tabs();
});
{scriptClose:h}


Hope this helps to someone suffering from same (d)effect to save a bit of debugging.

3 comments:

Klaus Hartl said...

The reason for the buggy map behavior has nothing to do with jQuery. If you initialize a Google Map in a hidden tab, that tab's container and its children's dimensions get not properly calculated by the Google Map script, thus the map shows this strange behavior. That's why initializing the map before Tabs works. Another workaround is to change CSS so that the tab panels do not get hidden by display: none but with the offleft technique.

Ajay said...

I was actually using the same combo and getting same errors(incomplete display and incorrect centering.Interestingly map loaded completely on using firebug to inspect the element). I didn't know why and by trial and error I figured out that centering and display were corrected by initializing maps before tabs however if I opened an info-window map was still not centered properly. Carhartl's explanation was also very useful in understanding the actual cause but I didn't know how could I override jQuery UI tabs to use offleft technique instead of display:none so due to time constraints I took the easier way and shifted map to my first tab(it infact made more sense there along with address input)
Thnx to both of you!

MC Kris said...

Hi everybody !,

to resolve the issue you must execute the 'checkresize' command like this : jQuery(object).jmap('CheckResize');

this will reload the map and the display will be correct.

hope this will be helpfull !

Best regards, MC