谷歌地图不工作在jQuery选项卡 [英] Google Maps Not Working in jQuery Tabs
问题描述
当放置在jQuery标签中时，Google地图无法正常工作，这个问题遍布整个网络。在我迄今为止的研究中，似乎没有任何解决方案可行。希望这里有人可以帮助...
这是Firefox 10，Chrome 17，Safari 5.1.2，Opera 11.61中的错误屏幕截图。
http://www.flickr.com/photos/75523633@N04/ 6932970713 /
这个错误在IE8中不存在，在9中是错误的。在Firefox中，当您打开FireBug时，它将消失。
该网站位于Wordpress 3.3.1中，地图通过插件生成/检索。我使用的地图插件似乎并不重要;该错误保持不变。根据我的研究，这似乎是标签和Google Map API之间的js / jQuery问题，而不是Wordpress /插件问题。
这是我的代码。现在，我正在使用地图的wp-gmappity-easy-google-maps插件，但我也尝试过全面的google-map-plugin。这两个工作在标签外很好。
HTML：
//标题调用：
< script type ='text / javascript'src ='http：//maps.google.com/maps/api/js？sensor = false'>< / script>
< script type ='text / javascript'src ='http：//xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'>< / script>
// HTML正文：
< div class =tabs_framed_container>
< ul class =tabs_framed>
< li>< a href =＃>标签1< / a>< / li>
< li>< a href =＃>标签2< / a>< / li>
< li>< a href =＃>标签3< / a>< / li>
< li>< a href =＃>地图标签< / a>< / li>
< li>< a href =＃>标签3< / a>< / li>
< / ul>
< div class =tabs_framed_content>
< h2>标签1内容< / h2>
<！ - 一些内容 - >
< / div>
< div class =tabs_framed_content>
< h2>标签2内容< / h2>
<！ - 一些内容 - >
< / div>
< h2>标签3内容< / h2>
<！ - 一些内容 - >
< / div>
< div class =tabs_framed_content>
< div class =map_container>
< div style =width：900px; margin-left：auto; margin-right：auto;>
< / div>
< script type =text / javascript>
函数wpgmappity_maps_loaded1（）{
var latlng = new google.maps.LatLng（42.4005322，-71.2750094）;
var options = {
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
zoomControl：true，
zoomControlOptions：
{
风格：google.maps.ZoomControlStyle.SMALL，
位置：google.maps.ControlPosition.TOP_LEFT
}，
mapTypeControl：true，
mapTypeControlOptions：
{
style：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
position：google.maps.ControlPosition.TOP_RIGHT
}，
scaleControl：true，
scaleControlOptions：
{
位置：google.maps.ControlPosition.TOP_LEFT
}，
streetViewControl：true，
streetViewControlOptions：
{
position：google.maps.ControlPosition.TOP_LEFT
}，
panControl：false，zoom：14
};
var wpgmappitymap1 = new google.maps.Map（document.getElementById（'wpgmappity-map-1'），options）;
var point0 = new google.maps.LatLng（42.4005322，-71.2750093）;
var marker1_0 =新增google.maps.Marker（{
图标：'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png'，
位置：point0，
map：wpgmappitymap1
}）;
jQuery（window）.load（function（）{
wpgmappity_maps_loaded1（）;
}）;
< / script>
< / div>
< / div>
< div class =tabs_framed_content>
< h2>标签2内容< / h2>
<！ - 一些内容 - >
< / div>
以下是相关的CSS：
.tabs_framed {padding：0; margin：0; list-style-type：none; clear：left; height：25px ; border-bottom：1px solid＃E5E5E5;}
.tabs_framed_container {margin-bottom：40px;}
.tabs_framed a {
display：block;位置：相对;背景：#fafafa; border：1px solid＃E5E5E5; padding：7px 30px;保证金右：2px的;
font-size：10px;文字修饰：无;文本转换：大写;字母间距：1px的;行高：10px的;颜色：＃777;
opacity：1; -webkit-transition：全部.5s缓解; -moz-transition：全部.5s缓解;转型：所有.5s缓解;过渡：全部.5s缓解;
}
.tabs_framed a：hover {color：＃20548B; text-decoration：none; background：#fff;}
.tabs_framed a.current {color：＃000; cursor：default ; border-bottom：1px solid #fff; background：#fff;}
.tabs_framed li，{padding：0; margin：0; list-style-type：none; float：left;}
.tabs_framed_content {display：none; background-color：#fff; border：1px solid＃E5E5E5; border-width：0 1px 1px 1px; padding：30px 30px 15px 30px;}
div.wpgmappity_container img {
background-position：0％0％;
background-color：none！important;
最大宽度：无！重要;
background-image：none！important;
背景重复：重复！重要;
background-attachment：scroll！important;
}
以下是指向我的选项卡的文件的链接：
http://themes.mysitemyway.com /awake/wp-content/themes/awake/lib/scripts/tabs.min.js
flowplayer.org/tools/forum/25/79274是我找到的一个解决方案（滚动到底部）。但是，checkResize和resizeMap不再有效（请参阅code.google.com/apis/maps/documentation/javascript/reference.html#Map上的api参考，向下滚动至Events并查找google.maps.event。触发器（地图，'resize'），这显然是替换代码）。 www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps是另一篇太旧的文章。
我看过这个建议：
$ p $ jQuery（document） .ready（function（）{
jQuery（'。tabs_container'）。bind（'tabsshow'，function（event，ui）{
if（ui.panel.id ==map-tab ）{
google.maps.event.trigger（map，'resize'）;
}
}）;
}）;
但我不知道如何实现它（尝试了几种方法，但没有成功），或者如果它甚至可以工作。
在我所有的研究中，看起来您必须在选择包含地图的选项卡时触发地图大小调整事件。到目前为止，我没有运用任何解决方案 - 特别是因为我熟悉js / jQuery。似乎熟悉js或jQuery的人可以解决这个问题。
请帮助我。
我放弃了插件并使用已发布的Google地图短代码来使用主题。虽然我失去了自定义标记功能，但主题开发人员终于能够帮助完成这一切。他们将以下代码添加到简码PHP文件中。
jQuery（'ul.tabs_framed'）。data（'tabs'） .onClick（function（e，index）{
resizeMap（。'map'。$ map_id。）
}）;
function resizeMap（m）{
x = m.getZoom（）;
c = m.getCenter（）;
google.maps.event.trigger（m，'resize'）;
m.setZoom（x）;
m.setCenter（c）;
};
当包含地图的标签被点击时，此代码触发地图重新加载。它也重新绘制地图。这个解决方案为我解决了这个问题，现在谷歌地图显示在jquery选项卡中。希望这里的一些更精通javascript的用户（以及插件开发人员!!!）能够将此解决方案适用于他们自己的标签映射问题。
Google maps not working when placed inside jQuery tabs is a question that's all over the web. In my research so far none of the solutions seem to work. Hopefully someone here can help...
This is a screenchot of the error in Firefox 10, Chrome 17, Safari 5.1.2, Opera 11.61. http://www.flickr.com/photos/75523633@N04/6932970713/
The error is not present in IE8 and is intermittant in 9. In Firefox, it goes away when you open FireBug.
The site is in Wordpress 3.3.1 and the map is generated/retrieved via a plugin. It does not seem to matter which maps plugin I use; the error remains the same. Based on my research, this appears to be js/jQuery problem between the tabs and the Google Map API javascript, not a Wordpress/plugin problem.
Here is my code. Right now, I'm using the wp-gmappity-easy-google-maps plugin for the maps, but I have also tried the comprehensive-google-map-plugin. Both work great outside the tabs.
HTML:
// Header calls:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'></script>
// HTML Body:
<div class="tabs_framed_container">
<ul class="tabs_framed">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Map Tab</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tabs_framed_content">
<h2>Tab 1 Content</h2>
<!-- Some Content -->
</div>
<div class="tabs_framed_content">
<h2>Tab 2 Content</h2>
<!-- Some Content -->
</div>
<h2>Tab 3 Content</h2>
<!-- Some Content -->
</div>
<div class="tabs_framed_content">
<div class="map_container">
<div style="width:900px;margin-left:auto;margin-right:auto;">
<div class="wpgmappity_container" id="wpgmappity-map-1" style="width:900px;height:400px;margin-left:auto;margin-right:auto;"></div>
</div>
<script type="text/javascript">
function wpgmappity_maps_loaded1() {
var latlng = new google.maps.LatLng(42.4005322,-71.2750094);
var options = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl : true,
zoomControlOptions :
{
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeControl : true,
mapTypeControlOptions :
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl : true,
scaleControlOptions :
{
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl : true,
streetViewControlOptions :
{
position: google.maps.ControlPosition.TOP_LEFT
},
panControl : false, zoom : 14
};
var wpgmappitymap1 = new google.maps.Map(document.getElementById('wpgmappity-map-1'), options);
var point0 = new google.maps.LatLng(42.4005322,-71.2750093);
var marker1_0 = new google.maps.Marker({
icon : 'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png',
position : point0,
map : wpgmappitymap1
});
}
jQuery(window).load(function() {
wpgmappity_maps_loaded1();
});
</script>
</div>
</div>
<div class="tabs_framed_content">
<h2>Tab 2 Content</h2>
<!-- Some Content -->
</div>
Here is the relevant CSS:
.tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;}
.tabs_framed_container{margin-bottom:40px;}
.tabs_framed a{
display:block; position:relative; background:#fafafa; border:1px solid #E5E5E5; padding:7px 30px; margin-right:2px;
font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; line-height:10px; color:#777;
opacity:1; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;
}
.tabs_framed a:hover{color:#20548B;text-decoration:none;background:#fff;}
.tabs_framed a.current{color:#000;cursor:default;border-bottom:1px solid #fff;background:#fff;}
.tabs_framed li,{padding:0;margin:0;list-style-type:none;float:left;}
.tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:30px 30px 15px 30px;}
div.wpgmappity_container img {
background-position: 0% 0%;
background-color: none !important;
max-width: none !important;
background-image: none !important;
background-repeat: repeat !important;
background-attachment: scroll !important;
}
Here is a link to the file that governs my tabs: http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js
flowplayer.org/tools/forum/25/79274 is one solution I found (scroll to bottom). However, the checkResize and resizeMap no longer work (see api reference at code.google.com/apis/maps/documentation/javascript/reference.html#Map, scroll down a little to "Events" and find google.maps.event.trigger(map, 'resize') which is apparently the replacement code). www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps is another writeup that is too old.
I've seen this proposed:
jQuery(document).ready(function(){
jQuery('.tabs_container').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
google.maps.event.trigger(map, 'resize');
}
});
});
but I have no idea how to implement it (tried a few ways with no success) or if it would even work.
From all my research, it looks like you have to trigger a map resize event when the tab containing the map is selected. So far, I've had no luck adapting any of the solutions out there - espceially since I'm mot familiar with js/jQuery. It seems like someone familiar with js or jQuery could solve this.
Please help me.
I abandoned the plugins and went with the google maps shortcode that has been released for the theme I'm using. While I lose the custom markers functionality, the theme developers were finally able to help get this all working. They added the following code to the shortcode PHP file.
jQuery('ul.tabs_framed').data('tabs').onClick(function(e,index) {
resizeMap(" . 'map'.$map_id .")
});
function resizeMap(m) {
x = m.getZoom();
c = m.getCenter();
google.maps.event.trigger(m, 'resize');
m.setZoom(x);
m.setCenter(c);
};
This code triggers a map reload when the tab containing the map is clicked. It also recenters the map. This solution solved the problem for me and the google maps now display in the jquery tabs. Hopefully some of the more javascript-savvy users here (and plugin developers!!!) can adapt this solution to their own maps-in-tabs issues.
这篇关于谷歌地图不工作在jQuery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
