Google map in jQuery UI tabs / Drupal behaviors.js

Question

As you can see here the google map in the first jQuery ui tab loads correctly but the same map in second / third etc tabs does not load properly or loads off centre.

As mentioned here the problem is that "Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers)."

I have read for example here that the problem is that the map loads after the jQuery UI tabs and so I need a jQuery snippet in my (Drupal 7) theme's behaviors.js to to make the map load before the jQuery UI tabs.

(Please note that the alternative solution of applying CSS to .ui-tabs .ui-tabs-hide will not work for me because it causes problems elsewhere.)

Can anyone please tell me the code I need for my-theme.behaviors.js ?

my template.php =

<?php
function whitecross_160614_preprocess_html(&$variables){
// some comment here
    drupal_add_library('system', 'ui.tabs');
    drupal_add_js('jQuery(document).ready(function(){
                jQuery("#tabs-x, #tabs-y").tabs({event: "click"});
                jQuery("#tabs-x, #tabs-y").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
                jQuery("#tabs-x li, #tabs-y li").removeClass("ui-corner-top").addClass("ui-corner-left");
            });',
        'inline');
}

HTML =

<div id="jqueryui-tabs-wrapper">
<div id="tabs-x">
<div id="tab-list">
<ul>
<li><a href="#tabs-1">Map 1</a></li>
<li><a href="#tabs-2">Map 2</a></li>
<li><a href="#tabs-3">Map 3</a></li>
</ul>
</div>  <!--end tab list-->

<div id="tab-content">
<div id="tabs-1">
<iframe src="<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071"">https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2...</a> width="800" height="600" frameborder="0" style="border:0"></iframe>
</div>  <!--end tab 1-->

<div id="tabs-2">
<iframe src="<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071"">https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2...</a> width="800" height="600" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 2-->

<div id="tabs-3">
<iframe src="<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071"">https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2...</a> width="800" height="600" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 3-->

</div> <!--end tab-content -->
</div> <!--end div tabs-x-->
</div> <!--end jqueryui-tabs-wrapper-->

Answer 1

Further to the comments, here is a jsfiddle of what I was talking about. This is a quick example, but should be easily adapted to your own code. I altered the dimensions on the maps to show the change

CSS:

#toolbar
{
    width:100%;
    height:20px;
    background:#000;
}

#toolbar li
{
    display:inline-block;
    min-width:100px;
    background:#fff;
    color:#000;
    border:1px solid #ffff00;
    cursor:pointer;
}

#maps
{
    position:relative;
    width:800px;
    height:600px;
    overflow:hidden;
}

#maps #tabs-1,
#maps #tabs-2,
#maps #tabs-3
{
    position:absolute;
    top:0;
    left:0;
    width:800px;
    height:600px;
}

#maps #tabs-2,
#maps #tabs-3
{
    opacity:0;
}

HTML:

    <div id="toolbar">
        <li id="toolbar_tabs1">Map 1</li>
        <li id="toolbar_tabs2">Map 2</li>
        <li id="toolbar_tabs3">Map 3</li>
    </div>

    <div id="maps">
        <div id="tabs-1">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071" width="800" height="600" frameborder="0" style="border:0"></iframe>
</div>  <!--end tab 1-->

<div id="tabs-2">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071" width="700" height="500" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 2-->

<div id="tabs-3">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071" width="600" height="400" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 3-->

</div>

JS:

jQuery('#toolbar_tabs1').click(function(){
    jQuery('#tabs-1').animate({'opacity':1}, 200);
    jQuery('#tabs-2').animate({'opacity':0}, 200);
    jQuery('#tabs-3').animate({'opacity':0}, 200);
});

jQuery('#toolbar_tabs2').click(function(){
    jQuery('#tabs-1').animate({'opacity':0}, 200);
    jQuery('#tabs-2').animate({'opacity':1}, 200);
    jQuery('#tabs-3').animate({'opacity':0}, 200);
});

jQuery('#toolbar_tabs3').click(function(){
    jQuery('#tabs-1').animate({'opacity':0}, 200);
    jQuery('#tabs-2').animate({'opacity':0}, 200);
    jQuery('#tabs-3').animate({'opacity':1}, 200);
});