我已经在我的应用程序中实现了Google地图(以模态形式),但是正如您在下面的图像中看到的那样,有一个灰色区域,我当然希望摆脱它.可以移动地图以使灰色区域消失,但不应该这样做.
事情就是地图显示在一个模态框内,其中包含许多内容,这些内容是在点击显示模态的按钮时动态创建的.似乎问题可能是在加载模态之前地图内容没有完全加载,但我不确定……
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：
解决方法
发生这种情况的常见原因是地图的大小在初始化地图后会发生变化.如果由于某种原因更改了id =“map”的div的大小,则需要触发“resize”事件
google.maps.event.trigger(map,'resize');
您可以尝试在javascript控制台中触发事件,看看它是否有帮助.
请注意,这个答案是猜测,因为问题中没有任何内容可以使用,所以如果它没有帮助,请告诉我.
