在谷歌地图的灰色地带(Grey area in Google maps)

我在我的应用程序实现的谷歌地图（在模式），但是你可以在图像上看到下面有一个灰色地带，我当然想摆脱的。这是可能的，这样的灰色地带消失，移动地图，但不应该是必要的。

的事情是，地图被一个模式中，其中含有大量的内容被点击用于显示模态按钮时，该真实动态创建的内部示出。看来，问题可能是装模态之前地图内容不满载，但我不知道...

HTML：

    ...
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Test</h3>
    </div>
    <div id="modal-left" class="modal-body left"></div>
    <div class="modal-body right">
      <div id="map"></div>
    </div>
  </div>
    ...

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 = "<p><img class='modal-img' src='" + data.imgurl + "' /></p>" +
                        "<p>" + data.name + ", " + data.address + "<br/>" +
                        data.zipcode + " " + data.town + "</p>" +
                        "<p><a href='" + data.url + "' >" + data.url + "</a></p>";

            $('#myModalLabel').html(titel);
            $('#modal-left').html(content);
        });
    });

图1：

图2：

Answer 1:

通常的原因为什么发生这种情况的是，地图已经被初始化后的地图的大小而改变。如果由于某种原因，更改ID为div的大小=“地图”，你需要触发“调整大小”事件

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

你可以只尝试触发事件在JavaScript控制台，看看是否有帮助。

请注意，这个答案是猜测，因为没有什么真正的问题一起工作，所以请让我知道，如果它不能帮助。

Answer 2:

把google.maps.event.trigger（地图， “调整”）; 在setTimeout函数，以便它之后将触发该事件被触发。

Answer 3:

我一直在寻找了一段时间的解决方案。我有相同的问题，我不是唯一的一个。上面的代码行是不够的，但我注意到，手动调整我的浏览器中解决了这个问题。如果你解决过，那么这里就是我如何解决我的：

1）在你的函数初始化地图的末尾添加这一点。它会监听器添加到它，并调用该函数加载地图时。这将基本模拟调整大小。

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

我不得不回到中心调整大小后的地图

2）创建一个调整大小的监听器，称这样的谷歌地图resize事件：

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

我也不得不把地图我的初始化函数以外......我知道这是不是最好的解决方案，但它适用于现在。不要担心调整大小（）调用。

它好像它涉及到含谷歌地图隐藏的div。我也发现了类似的解决方案本网站 jfyi。祝好运！

Answer 4:

这为我工作：

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

从链接采取那@Bruno提到

文章来源: Grey area in Google maps