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.
