谷歌地图只是部分显示

你好我有这个问题，当我加载一个地图，其中的地图是隐藏的div，地图只是部分加载，左上角的地图的1/4，地图渲染得好，当它加载容器不隐。

我准备这个jsFiddle示例页面：

http://jsfiddle.net/Z5AGP/2/

$("#toggleAdvanced").click(function(){ $("#advancedSearch").slideToggle( "fast", function() { google.maps.event.trigger(map, 'resize'); }); }); 

如果您尝试，请单击“单击”文本，您将看到刚刚部分加载的地图，如何尝试从#map_wrapper {display：none; 到#map_wrapper {display：block; 和地图点击hiden和显示按钮完美。

正如你所看到的，我在幻灯片效果之后触发了google.maps.event.trigger（map，’resize’）事件，因此它可以正常工作…（正如我在其他队列中所说的那样）

怎么了？ 或者我该如何解决这个问题？

Answer 1

你在一个未显示的div上过早地调用你的初始化函数，这意味着当jquery显示div时，这个过程和地图存在冲突。

看看这里的小提琴。 http://jsfiddle.net/Z5AGP/2/

 $(document).ready(function() { $("#toggleMap").click(function(){ $("#map_wrapper").slideToggle( "fast", function() { initialize(); google.maps.event.trigger(map, 'resize'); }); }); }); 

Answer 2

谢谢丹尼尔乔丹，我是对的，所有被添加的dinamically重置，在每个div显示/隐藏后，为了解决它我添加了一个变量来检查地图是否已经初始化，现在正在进行是正确的。

 var mapInit = 0; $(document).ready(function() { $("#toggleMap").click(function(){ $("#map_wrapper").slideToggle( "fast", function() { if(mapInit == 0) { initialize(); mapInit = 1; } google.maps.event.trigger(map, 'resize'); }); }); }); 

这是本主题的解决方案

然而，如果地图已经初始化（如在开头）为什么调用事件resize不起作用？ （这似乎是一个错误，许多其他类似的问题提到，也称这个事件没有发生。

问候