谷歌地图只是部分显示

你好，我有这个问题，当我加载一个地图，在一个隐藏的div页面地图加载只是部分地图，左上角的1/4，如何地图渲染良好当它装载的容器不隐藏时。谷歌地图只是部分显示

我准备这个的jsfiddle示例页面：

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

如果你尝试，点击“点击”的文字，你会看到地图只是部分加载，如何不断尝试改变来自#map_wrapper的CSS {display：none; } to #map_wrapper {display：block; }和地图点击隐藏和显示按钮的作品完美。

正如你所看到的，我在幻灯片效果后触发google.maps.event.trigger（map，'resize'）事件，所以它应该可以工作......（正如我发现的其他队列中所述）

有什么不对？或者我该如何解决这个问题？

来源

2013-04-20 Dragnovich

感谢丹尼尔·乔丹，我是被dinamically加入被重置，每格显示/隐藏之后的一切，要解决它，我增加了一个变量来检查，如果地图已经initializated现在everithing是正确的。

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

这对这个话题

如何以往如果地图（在开始时是）已经initializated解决为什么调用事件调整大小没有工作？（这似乎是一个错误，其他许多类似这样的问题提的是，也称该事件并没有发生任何事情。

问候

来源

2013-04-27 20:03:57 Dragnovich

没问题，很高兴你把它排序。 – 2013-04-28 11:36:48

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

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

$(document).ready(function() { 


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

来源

2013-04-20 17:53:01

好了，现在我看地图，之后的“滑效应”，怎么过何必当初没有与rezise事件一起工作？每次我点击切换按钮时，地图将被重新初始化，这是否正确使用？我的意思是，如果我添加dinamically一些可拖动的标记，移动它们并在我重新显示时隐藏地图al会消失吗？还是不是？ – Dragnovich 2013-04-27 19:35:06

谷歌地图只是部分显示

回答

相关问题