Google map in jQuery UI tabs / Drupal behaviors.js
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:

    &lt;div id="toolbar"&gt;
        &lt;li id="toolbar_tabs1"&gt;Map 1&lt;/li&gt;
        &lt;li id="toolbar_tabs2"&gt;Map 2&lt;/li&gt;
        &lt;li id="toolbar_tabs3"&gt;Map 3&lt;/li&gt;
    &lt;/div&gt;

    &lt;div id="maps"&gt;
        &lt;div id="tabs-1"&gt;
&lt;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"&gt;&lt;/iframe&gt;
&lt;/div&gt;  &lt;!--end tab 1--&gt;

&lt;div id="tabs-2"&gt;
&lt;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"&gt;&lt;/iframe&gt;
&lt;/div&gt; &lt;!--end tab 2--&gt;

&lt;div id="tabs-3"&gt;
&lt;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"&gt;&lt;/iframe&gt;
&lt;/div&gt; &lt;!--end tab 3--&gt;

&lt;/div&gt;


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