Google地图在jQuery选项卡中不起作用

谷歌地图放在jQuery标签中不起作用是一个遍布网络的问题。到目前为止，在我的研究中，似乎没有一个解决方案是有效的。希望这里有人能帮忙

这是Firefox 10、Chrome 17、Safari 5.1.2和Opera 11.61中错误的屏幕截图。

该错误在IE8中不存在，在IE9中是间歇性的。在Firefox中，当你打开FireBug时，它就会消失

该网站位于Wordpress 3.3.1中，地图通过插件生成/检索。我使用哪个地图插件似乎并不重要；错误保持不变。根据我的研究，这似乎是标签和谷歌地图API javascript之间的js/jQuery问题，而不是Wordpress/插件问题

这是我的密码。现在，我正在为地图使用wp-gmappity-easy-google-maps插件，但我也尝试了全面的google-map插件。这两种方法在标签外都很有效

HTML:

以下是指向管理我的选项卡的文件的链接：

flowplayer.org/tools/forum/25/79274是我找到的一个解决方案（滚动到底部）。但是，检查resize和resizeMap不再工作（请参阅code.google.com/api/maps/documentation/javascript/reference.html#Map上的api参考，向下滚动一点到“Events”，然后找到google.maps.event.trigger（Map，'resize'），这显然是替换代码）。www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps是另一个太旧的文件

我看到有人提议：

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的人可以解决这个问题

请帮帮我

试试看：

改变

<li><a href="#">Map Tab</a></li> 

在页面顶部的脚本标记中。这应该为您做些什么：

---

通过将

id

属性添加到选项卡链接，可以明确指定其中有一个映射。然后，您正在侦听jQuery选项卡库提供的

onClick

事件，该事件在选择选项卡时触发，从而触发重新调整地图大小。

问题很简单。贴图必须在具有维度的元素中渲染。如果使用隐藏选项卡内容的选项卡系统，则隐藏父级时，选项卡内容内的所有元素都没有维度。如果jQuery工具css允许您这样做，请将“隐藏”内容设置为屏幕外，而不是隐藏

为了使用： google.maps.event.trigger（映射，'resize'）

您需要访问初始映射对象变量，该变量为“var wpgmappitymap1”，但其作用域位于map init函数内。如果将其设置为全局变量，则可以将其放入调整大小触发器中

  google.maps.event.trigger(wpgmappitymap1, 'resize');

---

在开发一个包含地图标签内容的网站时，我遇到了同样的问题。 该网站是（在西班牙语中，单击地图图标或“ubicacion”链接）。 每当tab div与其tab组中的其他div一起加载时，就会出现您提到的相同错误。 我发现，如果我能在其他选项卡加载之后给它一些时间加载，那么就不会有任何问题

我可以这样做，因为无论如何，我给了3.5秒的时间让包装器显示，以便加载所有背景照片，并且地图在加载时处于不可见的选项卡中，所以我不需要它立即显示

然后，映射选项卡作为回调函数在整个包装完成后立即加载。 如果检查页面，请查找id“窗格容器”。在“窗格”中，您可以找到在末尾加载的map div

我在index.php页面中使用的相关jQuery代码如下：

<script type='text/javascript'>
   ( function( $ ) {
     // for SOF post --- previous code deleted ---
     $( "#wrapper" ).delay( 3500 ).fadeIn( "slow",function() {
     // Animation complete
     <?php $post_map = get_posts('name=map');?>
     $( "#map" ).delay( 1000 ).append( <?php echo "'".$post_map[0]->post_content."'"; ?> );
            } );
 } )( jQuery );
</script>

（函数（$）{
//对于SOF post——删除以前的代码---
$（“#包装器”）.delay（3500）.fadeIn（“slow”，function（）{
//动画完成
$（“#map”）.delay（1000）.append（我放弃了插件，使用了为我正在使用的主题发布的google maps短代码。虽然我失去了自定义标记功能，但主题开发人员最终能够帮助实现这一切。他们在短代码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);
};

此代码在单击包含地图的选项卡时触发地图重新加载。它还重新居中地图。此解决方案解决了我的问题，google地图现在显示在jquery选项卡中。希望这里的一些更精通javascript的用户（和插件开发人员！！！）可以将此解决方案调整为他们自己的选项卡问题中的地图。
问题（如上所述和其他地方）是地图div必须可见才能工作。因此，请将地图加载到可见的选项卡中。然后，如果愿意，更改为要显示的选项卡

为此，我在映射中添加了一个一次性事件侦听器。在该函数中，我将其更改为第一个选项卡。在加载过程中，在更改选项卡之前，您确实会看到映射区域约一秒钟。优点是用户无需为此做任何事

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     $("#Tabs").tabs('select',0);
});

我也有同样的问题，这是我的解决方案

我添加了ajaxComplete函数，它在所有ajax请求或帖子完成时触发

<script type="text/javascript">   
   $(document).ajaxComplete(function(e){
         calculateRoute("from","to");            
   });        
</script>      


$（文档）.ajaxComplete（函数（e）{
计算器输出（“从”、“到”）；
});        
rogercut的回答让我找到了我需要的地方。我正在使用嵌套的引导选项卡，无法更新地图

当我单击选项卡组2（#tg2）时，地图选项卡是第一个显示的选项卡。如果有人从选项卡组2内单击第二级选项卡（#tab1），我还需要触发调整大小

单击处理程序可以工作，但问题是单击时，选项卡仍然隐藏…通过设置一个小延迟，它为选项卡提供了在调整大小触发之前显示的时间

// Create Map
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(48.8582, 2.2945), //I see Paris, I see France
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

//Bind click handlers - Here's the important part
$('a[href=#tab1], a[href=#tg2]').on('click', function() {
    setTimeout(function(){
        google.maps.event.trigger(map, 'resize');
    }, 50);
});

所以，我们告诉浏览器
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);
};

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     $("#Tabs").tabs('select',0);
});

<script type="text/javascript">   
   $(document).ajaxComplete(function(e){
         calculateRoute("from","to");            
   });        
</script>      

// Create Map
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(48.8582, 2.2945), //I see Paris, I see France
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

//Bind click handlers - Here's the important part
$('a[href=#tab1], a[href=#tg2]').on('click', function() {
    setTimeout(function(){
        google.maps.event.trigger(map, 'resize');
    }, 50);
});

 $(function(){

$('#maptab').bind('click',function() {
            var w = $('#map_view').width();
            var h = $('#map_view').height();
            $('#map_canvas').css({ width: w, height: h });
           google.maps.event.trigger(map, 'resize');

        });

});

<script type="text/javascript">

function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}

function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementById('popup').style.display = 'none';
    document.getElementById('hiding').style.display = 'block';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}

function showPopup() {
    setCookie('popup_state', null);
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hideup').style.display = 'none';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );   
}

function checkPopup() {
    if (getCookie('popup_state') == null) { // if popup was not closed
        document.getElementById('popup').style.display = 'block';
        document.getElementById('hiding').style.display = 'block';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

  }   
}

</script>


<body onload="checkPopup();">

    <div class="map-button" id="hiding"><a href="#" onclick="showPopup(); return false;"><img src="images/map_magnify.png" alt="" title="Show Google Map" ></a></div>

    <div class="map-button" id="popup" style="display:none"> <a href="#" onclick="hidePopup(); return false;"><img src="images/map_delete.png" alt="" title="Hide Google Map" ></a>
    <div id="gmap"></div>
    </div>
</body>

<script type="text/javascript">

function ResetMap() {
google.maps.event.trigger(map, 'resize');
}

</script>


<li><a href="#tab1">Select Tab1</a></li>
<li onClick="ResetMap();"><a href="#tab2">Select Google Map</a></li>

<div class="tab1-content" id="tab1">Content tab1</div>
<div class="tab2-content" id="tab2"><?php include_once ('google-map.php') ?></div>

jQuery('.nav-tabs a[href="#my-map"]').on('shown.bs.tab', function(){
         google.maps.event.trigger(map, 'resize');
         map.setZoom(15); //You need to reset zoom
         map.setCenter(myLatlng); //You need to reset the center
    });

.tab-hidden{
    position: absolute !important;
    left: -10000px !important; /* maybe not that much */
    display:block !important;
    width:100% !important; /* I found this to be very important*/
}

.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) {
 display: block;
 height: 0;
 overflow-y: hidden;
}