谷歌地图的灰色地带答案

【问题标题】：Grey area in Google maps谷歌地图的灰色地带
【发布时间】：2012-12-03 19:16:00
【问题描述】：

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

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

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：

【问题讨论】：

确定不是连接不良造成的？
是的，我的连接工作正常...
你对灰色图像的问题很难解决，除非你能告诉我们如何重现它（一个 jsFiddle 会很好）。我建议发布您的“如何使标记居中？”单独提问，因为它似乎无关。
这里提到的iwloc=near 参数 (drupal.org/node/981504) 听起来很有希望居中。
标记居中，您在渲染所有地图图块时遇到了某种问题。如果没有复制问题的现场演示，很难提供更多帮助。页面 html 是否正确验证？

标签： jquery google-maps google-maps-markers center

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的回答。我之前实际上已经尝试过那行代码，但它并没有解决我的问题。请查看我现在更新的问题，希望能为问题带来更多启示。

【解决方案2】：

把 google.maps.event.trigger(map, "resize");在 setTimeout 函数中，以便在事件触发后触发。

【讨论】：

【解决方案3】：

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

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

我还必须将 map 放在我的初始化函数之外... 我知道这不是最好的解决方案，但它现在有效。不用担心 resize() 调用。

它似乎与包含谷歌地图的隐藏 div 有关。我还在this websitejfyi 上找到了类似的解决方案。祝你好运！

【讨论】：

"不要担心 resize() 调用。"这导致：“ReferenceError：找不到变量：调整大小”

【解决方案4】：

这对我有用：

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

取自链接，@Bruno 提到

【讨论】：