Google地图无法呈现

Question

注意：我认为最好就此提出一个新问题。

所以我最近问了一个关于why Google maps is not rendering properly的问题。现在答案看起来很简单直接，接受我的代码如下：

  var map;
  function initialize() {
    var mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(-34.397, 150.644),
         mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    google.maps.event.trigger(map, "resize");
  }

   google.maps.event.addDomListener(window, 'load', initialize);

问题是地图仍然破碎：

此地图存储在高度为350的<div id="Map"></div>中。保存地图的Div是Jquery-UI Tabs的一部分，因此它还附加了jquery皮肤，这可能会影响尺寸等等等。

据说说地图应该有效。

如果我打开控制台并投入：google.maps.event.trigger(map, "resize");，地图将按预期工作。

Answer 1

我还在jQuery UI标签中嵌入了Google Map（v3），并且必须解决此修复的问题：

var initialized = false;

$('.tabs').find('.ui-tabs-nav li').each(function() {
    if($(this).find('a').text() === 'Location') {
        if($(this).hasClass('ui-state-active')) {
            initialize();
            initialized = true;
        } else {
            $(this).click(function() {
                if(!initialized) {
                    initialize();
                    initialized = true;
                }
            });
        }
    }
});

注意 initialize()应该运行您的起始地图代码。有许多方法可以对初始化进行切片和切块，但关键是我们不会这样做，直到我们要查找的选项卡（在本例中为“Location”）处于活动状态。