google map pas charger dans bootstrap modal

Question

Je travaille avec bootstrap modal, où j'ai besoin de charger un googlemap, mais je fais juste comme normal doit charger, et la console me montre que les cartes il est chargé mais, l'inspection d'élément montrent l'élément qui doit charger la carte vide, comme l'image

le code utilisé pour ma carte est

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

Une chose, j'essaie juste de créer la carte en dehors du modal, Je veux dire sur la page, et ça fonctionne bien, le prob LEM est juste sur le

Mon code complet modal est sur external link afin de ne pas faire le poste trop longtemps

Merci beaucoup

Answer 1

Je viens de découvrir l'erreur, il était un dactylographique, je l'ai remarqué que les lignes 246-256 dans la corbeille de collage contiennent un modal avec le même conteneur de mappage d'ID, c'est la raison pour laquelle mon modal n'affichait pas la carte, car il était chargé sur le premier conteneur avec le même ID. beaucoup à vous tous