在jQuery选项卡中加载Google地图 [英] Loading Google Maps in jQuery tab
问题描述
我在将Google地图加载到jQuery选项卡时遇到问题。我尝试了来自互联网的每一个解决方案，使用以下建议：
谷歌地图V3不加载jQuery标签
Google Maps API v3 + jQuery UI选项卡的问题
等等...
但是他们都没有工作，要么我太小心使用它们，我不知道如何添加它们或者没有工作。
这是显示标签的方式：
< div class =tabprice>
< ul class =tabnavig>
<？php if（$ gmap_active）{？>
< li>< a href =＃block2>< span class =big><？php _e（'Map'，'anuncios'）？>< / span> ;< / A>< /锂>
<？php}？>
< / ul>
<？php if（$ gmap_active）{？>
<！ - - 标签2 - >
< div id =block2>
< div class =clr>< / div>
< div class =singletab>
<？php include_once（TEMPLATEPATH。'/includes/sidebar-gmap.php'）; ？>
< / div><！ - / singletab - >
< / div>
<？php}？>
这里是sidebar-gmap.php的内容
请大家，我求求你，帮助我！
其中一篇博文你引用了。
对于有同样问题的其他人：这里的问题依赖于你需要触发resize事件的事实您的节目动画结束。您可以通过调用 google.maps.event.trigger来完成该动画。 （map，resize）; 在您的show动画结束回调上。
$ b p> /wp-content/themes/anuncios/includes/js/theme-scripts.js
并将其替换为：
/ * Tab控制home main * /
jQuery（function（$）{
var tabContainers = $（'div.tabcontrol> DIV）;
tabContainers.hide（）。filter（'：first'）。show（）;
$（'div.tabcontrol ul.tabnavig a'）。click（function（）{
tabContainers.hide（）;
tabContainers.filter（this.hash）.fadeIn（100） ;
$（'div.tabcontrol ul.tabnavig a'）。removeClass（'selected'）;
$（this）.addClass（'selected'）;
return false; $ b $（'：first'）。click（）;
}）;
有了这个：
/ * Tab Control home main * /
jQuery（function（$）{
var tabContainers = $（'div.tabcontrol> div'） ;
tabContainers.hide（）。filter（'：first'）。show（）;
'（'div.tabcontrol ul.tabnavig a'）。click（function（）{
（）;
tabContainers.filter（this.hash）.fadeIn（100，function（）{
if（map！= undefined&& map！= null）
google.maps.event.trigger（map，resize）;
}）;
$（'div.tabcontrol ul.tabnavig a'）。removeClass（'selected'）;
$（this）.addClass（'selected'）;
return false;
}）。filter（'：first'）。click（）;
}）;
第2部分
找到以下代码：
$（tabs）.click（ function（）{
//隐藏所有标签
$（tabContainers）.hide（）.filter（this.hash）.fadeIn（500）;
$（tabs）.removeClass（' ）;
$（this）.addClass（'selected'）;
return false;
}）;
将其替换为
$（tabs）.click（function（）{
//隐藏所有标签
$（tabContainers）.hide（）。filter（this.hash）.fadeIn（500 ，函数（）{
if（map！= undefined&& map！= null）
google.maps.event.trigger（map，resize）;
}）;
$（tabs）.removeClass（'selected'）;
$（this）.addClass（'selected'）;
return false;
}）;
并且您的错误将会被修复，这次我在本地下载并测试，所以我100％确定它会工作。
I have issues loading a Google Map into a jQuery tab. I tried every single solution from the internet, using suggestions from here: Google Maps V3 not loading with jQuery tabs
Problems with Google Maps API v3 + jQuery UI Tabs
And so on...
But none of them worked, either I'm too noob to use them and I have no idea how to add them or are not working.
This is how the tabs are shown:
<div class="tabprice">
<ul class="tabnavig">
<?php if ( $gmap_active ) { ?>
<li><a href="#block2"><span class="big"><?php _e('Map', 'anuncios') ?></span></a></li>
<?php } ?>
</ul>
<?php if ( $gmap_active ) { ?>
<!-- tab 2 -->
<div id="block2">
<div class="clr"></div>
<div class="singletab">
<?php include_once ( TEMPLATEPATH . '/includes/sidebar-gmap.php' ); ?>
</div><!-- /singletab -->
</div>
<?php } ?>
And here is the content of sidebar-gmap.php
Please guys, I beg you, help me !
I'm the author of one of the blogposts you refered.
For other persons with the same problem: The problem in here relies on the fact that you need to trigger the resize event when your show animation ends.
You can do that by calling google.maps.event.trigger(map, "resize"); on your show animation end callback.
So, in your case (for the link you sended) you need to:
Edit the following file:
/wp-content/themes/anuncios/includes/js/theme-scripts.js
And replace this:
/* Tab Control home main */
jQuery(function($) {
var tabContainers = $('div.tabcontrol > div');
tabContainers.hide().filter(':first').show();
$('div.tabcontrol ul.tabnavig a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).fadeIn(100);
$('div.tabcontrol ul.tabnavig a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
With this:
/* Tab Control home main */
jQuery(function($) {
var tabContainers = $('div.tabcontrol > div');
tabContainers.hide().filter(':first').show();
$('div.tabcontrol ul.tabnavig a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).fadeIn(100, function(){
if(map != undefined && map != null)
google.maps.event.trigger(map, "resize");
});
$('div.tabcontrol ul.tabnavig a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Part 2
Find the following code:
$(tabs).click(function() {
// hide all tabs
$(tabContainers).hide().filter(this.hash).fadeIn(500);
$(tabs).removeClass('selected');
$(this).addClass('selected');
return false;
});
And replace it with
$(tabs).click(function() {
// hide all tabs
$(tabContainers).hide().filter(this.hash).fadeIn(500, function(){
if(map != undefined && map != null)
google.maps.event.trigger(map, "resize");
});
$(tabs).removeClass('selected');
$(this).addClass('selected');
return false;
});
And your bug will be fixed, this time I downloaded and tested it locally so I'm 100% sure it will work.
这篇关于在jQuery选项卡中加载Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
