jquery - Google map 中的灰色区域

Question

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

事实是， map 显示在模态框内，其中包含单击用于显示模态的按钮时动态创建的大量内容。看来问题可能是在加载模式之前 map 内容未完全加载，但我不确定......

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

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

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

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

请注意，这个答案是一个猜测，因为问题中没有真正可以处理的内容，所以如果没有帮助，请告诉我。