Hej,

i have a problem to load correctly googlemaps into jquery tabs. It
loads the google maps but show only the half map the rest is grey. I have found some links that discuss about that, but I don't solve it without help.

jquery docs

another link: http://www.coldfusionjedi.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-...

I have try to use another css

.ui-tabs .ui-tabs-hide {
    display:none;
}

to

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

in my node.tpl.php first i load this:

<?php
drupal_add_library('system', 'ui.tabs');
drupal_add_js('jQuery(document).ready(function(){jQuery("#tabs").tabs();});', 'inline');
?>
<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>

and then I load the map

<?php
$latitude= $field_standort_klinik_a [0]['latitude'];
$longitude= $field_standort_klinik_a [0]['longitude'];

print gmap_simple_map($latitude, $longitude, '', 14, 8, 225, true, '');
?>

but it does work for me
can you explain me how can I solve this?

greetings
drew29

Comments

alexmalka’s picture

alexmalka commented

Subscribing

tobiasb’s picture

tobiasb
Primary language German
Location Berlin
commented

You need a fix like this one #1064448: support gmap location cck vertical tabs - HACK to correctly render gmap location cck in vertical tab

Vlad Vinnikov’s picture

Vlad Vinnikov commented

I have the same problem. Any suggestions?

npralhad’s picture

npralhad commented
Version: 7.x-1.x-dev » 7.x-2.x-dev
Assigned: Unassigned » npralhad
Status: Active » Needs review

I had a similar problem loading GMAP in QTABS and VERTICAL TABS (i.e. tabs rendered through jQuery).
Somehow when the parent div (container) has display:none in css then this problem occurs.

Adding following to css has resolved the problem for me.
/********** CSS STARTS HERE***********/
.ui-tabs-hide,
.quicktabs-hide {
visibility:hidden;
position:absolute;
display: block; /*please add this line to your css*/
}

podarok’s picture

podarok
🇺🇦 he/him/his
Primary language Ukrainian
Location Ukraine
commented
Status: Needs review » Needs work

can You provide a patch that fixes this?

davewilly’s picture

davewilly commented

Use #id of your tab display to avoid messing with content on other tabs..

.ui-tabs #id-of-your-tab.ui-tabs-hide { 
	visibility: hidden;
	position: absolute !important;
	display: block !important;
}

*edit* Chrome/Opera on Android not applying the 'visibility: hidden;' rule..

socialnicheguru’s picture

socialnicheguru commented
Issue summary: View changes

I found these two similar tab rendering issues for different modules
set the height of the outside container explicitly:
https://www.drupal.org/node/1140886#comment-4817566

add a timeout to the js file to allow the settings including height to be rendered correctly:
https://github.com/NUKnightLab/TimelineJS/issues/496