Question

我正在使用Google Maps API的新版本v3。基本上我遇到的问题是我在jQuery UI标签中有一个Google Map。地图不在第一个选项卡中，因此您必须单击选项卡才能查看地图，但它并不总是正确呈现。即有时地图图像没有正确放置。

当我使用API的v2时遇到了这个问题，但我设法通过像这样初始化我的Map解决了这个问题：

map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});

不幸的是，这在v3中不起作用。我看了一下这个帖子中的建议：Problems with Google Maps API v3 + jQuery UI Tabs

对我来说什么都没有用，但是我使用了一种解决方法，即在tab load上初始化map函数：

$(function()
{
    $("#tabs-container").tabs({show: function(event, ui)
    {
        if(ui.panel.id == "viewmap")
        {
            mapiInitialize();
        }
    }});
});

这一切都很好，但我更喜欢当用户点击标签时地图为“那里”。地图加载有时需要几秒钟，并且所有用户在那段时间看到的是纯灰色背景 - 某种加载指示可能有帮助。

那么有人有什么建议吗？我的标记和CSS如下：

<div id="tabs-container">
<ul>
    <li><a href="#details"><span>Details</span></a></li>

    <li><a href="#viewmap"><span>Location Map</span></a></li>

    <li><a href="#reviews"><span>Reviews (<?php echo $numrows; ?>)</span></a></li>
</ul>

<div id="details"><?php echo $details; ?></div>

<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
    <div id="map" style="height: 340px;"></div>
</div>

<div id="reviews"><?php echo $reviews; ?></div>

</div><!-- end tab-container -->

Answer 1

初始化jQuery UI选项卡时尝试此操作：

$("#tabs-container").tabs({                    
    show: function(event, ui) {
        google.maps.event.trigger(map, 'resize');
    }                    
});

注意：在初始化标签之前，您必须初始化地图。

Answer 2

切换到包含地图调用google.maps.events.trigger(map, 'resize');的标签后，应将其正确显示。

Answer 3

只需使用

map.setZoom( map.getZoom() );

Google Maps API v3和jQuery-UI标签

3 个答案: