Jquery 谷歌地图中的灰色区域

我已经在我的应用程序中实现了谷歌地图（在一个模式中），但是正如你在下面的图片中看到的那样，有一个灰色区域我当然想去掉。可以移动地图以使灰色区域消失，但不需要这样做

问题是，地图显示在一个模式框中，其中包含了许多内容，这些内容是在单击显示模式的按钮时动态创建的。看起来问题可能是地图内容在模态加载之前没有完全加载，但我不确定

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>
    ...

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

。。。
×
试验
...

js:

    ...
  <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>
    ...

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

函数初始化映射（纬度、经度）{
var place=new google.maps.LatLng（纬度、经度）；
变量myOptions={
缩放：10，
中心：地点，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
var marker=new google.maps.marker({
位置:地点,，
地图：地图，
标题：“
});
};
$（'.modal btn'）。单击（函数（）{
var producerId=$（this.attr（'id'）；
GetProducer（producerId，function（data）{/发生这种情况的通常原因是在映射初始化后映射的大小发生了更改。如果出于某种原因使用id=“map”更改div的大小，则需要触发“resize”事件

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

请注意，这个答案是一个猜测，因为问题中没有任何东西可以处理，所以如果没有帮助，请告诉我。
我一直在寻找解决方案。我有完全相同的问题，而且我不是唯一一个。
上面的代码行还不够，但我注意到手动调整浏览器大小可以解决问题。如果它也解决了您的问题，那么下面是我解决我的问题的方法：

1） 在初始化映射的函数末尾添加此项。它将向其添加一个侦听器，并在加载映射时调用该函数。它基本上模拟调整大小

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

调整大小后，我不得不重新居中调整地图

2） 创建一个调整大小侦听器，调用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.maps.event.trigger（映射，“调整大小”）；在setTimeout函数中，以便在事件触发后触发。
您确定这不是由连接不良引起的吗？是的，我的连接工作得很好…您对灰色图像的问题将很难解决，除非您能告诉我们如何复制它（JSFIDLE会很好）。我建议发布您的“如何将标记居中？”单独提问，因为它似乎不相关。此处提到的
iwloc=near
参数（）听起来很适合居中。marker已居中，您在渲染所有地图分幅时遇到了一些问题。如果没有复制问题的实时演示，则很难提供更多帮助。页面html是否正确验证？谢谢您的回答。我以前确实尝试过这行代码，但它无法解决我的问题。请查看我的n下面更新了一个问题，希望能让问题变得更清楚。“不要担心resize（）调用。”结果是：“ReferenceError:找不到变量：resize”