Google地图只显示部分内容 [英] Google Map displaying just partially

问题描述

Hello我有这个问题，当我加载一个地图在一个隐藏的div的地图，地图加载只是部分，左上角的地图的1/4，地图如何加载时

< /jsfiddle.net/Z5AGP/2/rel =nofollow> http://jsfiddle.net/Z5AGP/2/

  $（＃toggleAdvanced）。click（function（）{
 $（＃advancedSearch）。slideToggle（fast，function（）{
 google.maps。 event.trigger（map，'resize'）; 
}）; 
}）; 
  

如果你尝试，点击点击文本，你会看到地图只是部分加载，怎么尝试改变CSS从#map_wrapper {display：none; } to #map_wrapper {display：block; }和地图点击hiden和显示按钮工作完美。

如你所见，Im触发google.maps.event.trigger（map，'resize'）事件后幻灯片效果，所以它sould工作...（如在其他quetions告诉我发现）

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

解决方案

感谢丹尼尔·乔丹，我是正确的所有添加的dinamically重置，显示/隐藏，解决它我添加了一个变量来检查地图是否已经初始化，现在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'）; 
} ）; 
}）; 
}）; 
  

这是此主题的解决方案

如果地图已经初始化（如在开始）为什么调用事件调整大小没有工作？ （这似乎是一个错误，许多其他问题，像这样提到，也调用事件，没有发生。

尊敬

Hello I have this problem, when I load a page with a map that is in a hidden div the map loads just partially, top-left 1/4 of the map, how ever the map render well when it is loaded with the container not hidden.

I prepare this jsFiddle example page:

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

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

if you try, click on the "Click" text, and you will see the map just partially loaded, how ever try changing the CSS from #map_wrapper { display: none; } to #map_wrapper { display: block; } and the map click hiden and show button works perfect.

And as you can see, Im triggering the google.maps.event.trigger(map, 'resize') event after the slide effect so it sould be working... (as told in other quetions I found)

what's wrong? or how can I solve this?

解决方案

Thanks Daniel Jordan, I was right everything that was added dinamically was reset, after each div show/hide, to solve it I added a variable to check if the map was initializated already and now everithing is correct.

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

That's the solution for this topic

How ever if the map was already initializated (as in the begining) why call to the event resize did not work? (this seems to be a bug, many other questions like this mention that the also call the event and nothing happened.

Regards

这篇关于Google地图只显示部分内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！