引导模式中的Google Maps灰色屏幕

Question

我有一个显示谷歌地图的功能：

function initMapSA(lat, ln) {

    var myLatLng = { lat: lat, lng: ln };
    var opt = {
       center: myLatLng,
       zoom: 15,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       streetViewControl: false
    };

    map2 = new google.maps.Map(document.getElementById('map_canvas_agent'), opt);
    var markerSa = new google.maps.Marker({
         position: myLatLng,
         map: map2,
         title: 'Hello World!'
    });

}

在#modal-body我添加<div id="map_canvas_agent"></div>

我通过表单按钮点击事件触发它：

$(".sa-location").click(function () {
     var id = $("#ServiceAgent").val(); //combobox value
     $.get("@Url.Action("GetServiceAgentLocation")", { id: id }, function (data) {
         initMapSA(data.Lat, data.Ln);//Initialize google maps
     }, "json");

});

Goole地图正在显示，但它只是一个灰色屏幕而不是实际地图。我该如何解决这个问题？

Answer 1

强制触发地图上的调整大小：

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