javascript - 谷歌地图显示不正确

Question

当来自 li 元素事件的某个点击被触发时，我正在创建一个带有谷歌地图的视图。第一次地图显示正常。结果是这样的：

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

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

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

我注意到一个奇怪的行为，如果我调整浏览器窗口的大小，之后地图就会显示正常。

我正在使用以下代码：

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
        });

编辑：相关帖子在这里和这里。

编辑 2：有时通过使用 setInterval() 的解决方法。所以看来问题是地图还没有为活动做好准备。

Answer 1

尝试触发 Google maps(v3) resize 事件。

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

这个小提琴将帮助你找到不同之处。