Leaflet map does not appear in boot div

Question

This is a super weird problem that I cannot understand. I have my div with a map and css style. The Leaflet map is displayed in a single rectangle, not in a div. As if the z index is wrong, but I can't figure it out. JS is in the document.ready function. I added a border around the div map just to show how everything is.

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:

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

I fixed the overlap problem , but the last problem still exists. ie,

When the page loads and the map is displayed on document.ready(), the map is visible only in the upper left corner. And if I change the browser size (maximize, minimize), then the map will update correctly.

Answer 1

:

map.invalidateSize();

.

Answer 2

div, . , map.invalidateSize() jQuery, div . , ...

Answer 3

It worked for me

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

Or search in case of display of div and function creating map

Answer 4

I have the same problem to display a map inside Bootstrap tabs. I fixed it using

 $('#gmap').on('shown.bs.tab', function (e) {
    //clear map first
    clearMap();
    //resize the map
   map.invalidateSize(true);
   //load the map once all layers cleared
   loadMap();
})