Brochure Carte non affichée dans bootstrap div

C'est un problème super étrange que je ne peux pas comprendre. J'ai mon div avec la carte et son style css. La carte Brochure apparaît dans un rectangle et non dans la division. C'est comme si l'index z était erroné, mais je ne peux pas le comprendre. Le JS est dans la fonction document.ready. J'ai ajouté une bordure autour de la carte div juste pour montrer comment tout est.

CSS:

#map {width:100%;height:100%;margin-left:10px;margin-top:40px} 

HTML:

  <div id="showTravel" class="row" style="display:none"> <div class="col-lg-12"> <div class="wrapper wrapper-content"> <h2 style="margin-top:-18px">All Travelers</h2> <div id="travelContent"> <div id=map></div> </div> </div> </div> </div> 

JS:

• Détecter si la vidéo HTML5 est en cours de lecture ou en pause et afficher ou masquer une Div en conséquence
• ControllerProvider en UI-routeur entraîne une erreur
• Quels sont les cas de bonne utilisation pour les fonctions anonymes auto-exécutables JavaScript?
• Validation de plusieurs entrées et entrées de fichiers "array named" dans JQuery Valider
• Bootstrap centrée verticale à sensibilité modale?

 var map=L.map('map',{ minZoom:2, maxZoom:18 }).setView([x,y],16); var buildingIcon=L.icon({ iconUrl:'/images/bicon.png', iconSize:[25,40], popupAnchor: [-3, -20], iconAnchor: [14, 38] }); L.marker(x,y],{ icon:buildingIcon, title:'town, state' }) .bindPopup('<b>first last</b><br>Email: email address<br>Cell: phone number') .addTo(map); mapLink='<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; ' + mapLink, maxZoom:18 }).addTo(map); 

J'ai réparé le problème de chevauchement , mais le dernier problème existe encore, c'est-à-dire,

Lorsque la page se charge et que la carte est rendue sur document.ready() la carte n'est visible que dans le coin supérieur gauche de l'écran. Et si je modifie la taille du navigateur (maximiser, minimiser), la carte est actualisée correctement.

• L'exécution de la fonction JavaScript peut-elle être interrompue?
• Télécharger un fichier de client vers serveur sans boîte de dialogue openFile
• Comment traduire tout le site Web avec Google Translate
• THREE.js – Impossible de charger la texture localement
• Pourquoi, quand j'ajoute un tas d'auditeurs d'événements en boucle, chaque élément déclenche-t-il le dernier interlocuteur?

 map.invalidateSize(); 

 $('#showTravel').on('shown.bs.modal', function (e) { //creation of map })