google map not load into bootstrap modal

Question

I am working with modal bootstrap, where I need to load a googlemap, however I just do as normal must load, and console shows me that maps it is being loaded but, the element inspection show the element which must load the map empty, like the image

The code used for my map is

var map;

var drawingManager;
var selectedShape;

function initializeMap() {
    var mapOptions = {
        center : new google.maps.LatLng(-16.4237766667, -71.54262),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"),
            mapOptions);
    console.debug(map);
}
$(document).ready(
        function() {
            initializeMap();
            $('#createleaf').click(function() {
                $('#modalFence').modal('show');
            });
            $('#modalFence').on('shown',function(event) {
                //console.debug(map);
                google.maps.event.trigger(map, "resize");
                map.setZoom( map.getZoom() );
                var modal = $(this);
                modal.css('margin-top',(modal.outerHeight() / 2) * -1)
                .css('margin-left',(modal.outerWidth() / 2) * -1);
                return this;
            });
        });

One more thing, I just try to create the map outside the modal, I mean on the page, and it runs well, the problem is just on the modal

My full code is on external link in order to not make the post too long

Thanks a lot

Answer 1

我只是发现错误，它是一种打字，我注意到粘贴箱中的第246-256行包含具有相同id映射容器的模式，这就是为什么我的模式未显示地图的原因它被装载到第一个具有相同ID坦克的集装箱上