谷歌地图显示不当

Question

当触发来自li元素事件的特定点击时，我正在创建一个包含谷歌地图的视图。 这是地图第一次显示正常。结果如下：

http://postimg.org/image/eolnn0411/

但是当我点击另一个li元素来创建一个新地图时，它显示如下：

http://postimg.org/image/576um203l/

我注意到一种奇怪的行为，如果我调整浏览器窗口的大小，那么地图会在之后显示为ok。

我正在使用以下代码：

var latlng = new google.maps.LatLng(coordinates[0], coordinates[1]);
var myOptions = {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

var map;
map = new google.maps.Map(node, myOptions);

var marker = new google.maps.Marker({
            map: map,
            position: latlng
        });

编辑： 相关帖子here和here。

编辑2：使用setInterval（）的变通方法有时会起作用。所以似乎问题是地图没有为事件做好准备。

Answer 1

尝试触发Google地图（v3）调整大小事件。

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

这fiddle将帮助您找到差异。