Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
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
Comment #1
alexmalka CreditAttribution: alexmalka commentedSubscribing
Comment #2
tobiasbYou need a fix like this one #1064448: support gmap location cck vertical tabs - HACK to correctly render gmap location cck in vertical tab
Comment #3
Vlad Vinnikov CreditAttribution: Vlad Vinnikov commentedI have the same problem. Any suggestions?
Comment #4
npralhad CreditAttribution: npralhad commentedI 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*/
}
Comment #5
podarokcan You provide a patch that fixes this?
Comment #6
davewilly CreditAttribution: davewilly commentedUse #id of your tab display to avoid messing with content on other tabs..
*edit* Chrome/Opera on Android not applying the 'visibility: hidden;' rule..
Comment #7
SocialNicheGuru CreditAttribution: SocialNicheGuru commentedI 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