引导模式下的谷歌地图灰色屏幕

Google Maps grey screen in bootstrap modal

本文关键字：谷歌地图 灰色 屏幕 模式      更新时间：2023-10-03

我有一个显示谷歌地图的函数：

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

谷歌地图正在显示，但它只是一个灰色屏幕，而不是一个实际的地图。我该怎么解决？

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

google.maps.event.trigger(map, 'resize');
相关文章：