Google 地图未显示在 bootstrap 模态弹出窗口中

Question

地图未显示在 bootstrap 模态弹出窗口中。

模态弹出窗口带有空白页，如何在其中显示地图。我添加了所有脚本文件和 css 文件。帮帮我！

HTML

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Google Maps</h4>
            </div>
            <div class="modal-body">

                <div id="map_canvas" style="width:auto; height: 400px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
// button 
<td><a href="#" onclick="loadMap('@callinfo.latitude','@callinfo.longitude')" data-toggle="modal" data-target="#myModal"><i class="fa fa-map-marker"></i></a></td>

JS

<script>
    function loadMap(lat, lon) {
      var mapOptions = {
        center: new google.maps.LatLng(lat, lon),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
     var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon)
    });
    marker.setMap(map);
    }

    //show map on modal
$('#myModal').on('shown.bs.modal', function (lat, lon) {     
    loadMap(lat, lon);
});
</script>

Answer 1

首先从 a 元素中删除 onclick 属性。

loadMap 方法应该只运行一次，这将从 shown.bs.modal 事件开始。

但是这个事件函数不接受 lat & lon 作为参数。

在某些元素上添加 lat & lon 作为数据属性，例如 map_canvas div:

<div id="map_canvas" data-lat="@callinfo.latitude" data-lon="@callinfo.longitude" style="width:auto; height: 400px;"></div>

然后像这样在 shown.bs.modal 事件中检索这些值：

$('#myModal').on('shown.bs.modal', function () {     
    loadMap($("#map_canvas").attr("data-lat"), $("#map_canvas").attr("data-lon"));
});

Google 地图未显示在 bootstrap 模态弹出窗口中

Google map is not displaying on bootstrap modal popup

google-maps

jquery-ui

bootstrap-modal

twitter-bootstrap-3