google map не загружается в bootstrap modal

Question

Я работаю с модальным бутстрапом, где мне нужно загрузить googlemap, однако я просто делаю так, как обычно должен загружаться, а консоль показывает мне, что карты загружаются, но проверка контроля элементов элемент, который необходимо загрузить карту пустой, как изображение

код, используемый для моей карты является

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

более, что один, я просто пытаюсь создать карту за пределами модально, Я имею в виду на странице, и она работает хорошо, проблема Лем только на модальной

Мой полный код находится на external link для того, чтобы не сделать пост слишком долго

Большое спасибо

Answer 1

Я только что нашел ошибку, это была машинопись, я заметил что строки 246-256 в мусорной корзине содержат модальный с тем же контейнером идентификационной карты, что и является причиной того, почему мой модал не отображал карту, потому что он загружался в первый контейнер с тем же идентификатором Tanks много для всех вас