Google地图中的灰色区域

我已经在我的应用程序中实现了Google地图（以模态forms），但是正如您在下面的图像中看到的那样，有一个灰色区域我当然想要摆脱它。可以移动地图以使灰色区域消失，但不应该需要。

事情就是地图显示在一个模态框内，其中包含了点击显示模态按钮时动态创建的大量内容。似乎问题可能是在加载模态之前地图内容没有完全加载，但我不确定……

HTML：

...    Test
 
 
  
 
 
 ...

JS：

  function initializeMap(latitude, longitude) { var place = new google.maps.LatLng (latitude, longitude); var myOptions = { zoom: 10, center: place, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), myOptions); var marker = new google.maps.Marker({ position: place, map: map, title: "" }); }; $('.modal-btn').click(function(){ var producerId = $(this).attr('id'); GetProducer(producerId, function(data) { // <--- data retrieved through ajax initializeMap(data.latitude, data.longitude); var titel = data.name; var content = "
" + "" + data.name + ", " + data.address + "
" + data.zipcode + " " + data.town + "
" + "https://stackoverflow.com/questions/13901520/grey-area-in-google-maps/" + data.url + "
"; $('#myModalLabel').html(titel); $('#modal-left').html(content); }); });

图1：

图2：

发生这种情况的常见原因是地图的大小在初始化地图后会发生变化。如果由于某种原因更改了id =“map”的div的大小，则需要触发“resize”事件

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

您可以尝试在javascript控制台中触发事件，看看它是否有帮助。

请注意，这个答案是猜测，因为问题中没有任何内容可以使用，所以如果它没有帮助，请告诉我。

把google.maps.event.trigger（map，“resize”）; 在setTimeout函数中，以便在触发事件后触发它。

我一直在寻找解决方案。我有完全相同的问题，我不是唯一的问题。上面的代码行还不够，但我注意到手动调整浏览器的大小就是修复问题。如果它也解决了你的问题，那么我的解决方法就是：

1）在初始化地图的函数结束时添加它。它将添加一个监听器并在加载地图时调用该函数。它基本上会模拟resize。

 google.maps.event.addListenerOnce(map, 'idle', function(){ $(window).resize(); map.setCenter(yourCoordinates); });

resize后我不得不重新调整地图

2）创建一个resize的侦听器，调用google map resize事件，如下所示：

 $(window).resize(function() { if ($("#map_canvas").children().length > 0){ if (map) google.maps.event.trigger(map, 'resize'); }});

我还必须将地图放在我的初始化函数之外…我知道它不是最好的解决方案，但现在可以使用了。不要担心resize（）调用。

它似乎与包含谷歌地图的隐藏div有关。我也在这个网站 jfyi找到了类似的解决方案。祝好运！

这对我有用：

  var center = map.getCenter(); // . . . your code for changing the size of the map google.maps.event.trigger(map, "resize"); map.setCenter(center);

取自@Bruno提到的链接

Google地图中的灰色区域

jQuery：Animate Margins to Auto？