javascript - ocultar - Mapa de folletos que no se muestra en bootstrap div

ocultar div bootstrap 4

Question

Este es un problema muy extraño que no puedo descifrar. Tengo mi div con el mapa y su estilo css. El mapa del folleto está apareciendo en un rectángulo y no en el div. Es como si el índice z fuera incorrecto, pero no puedo resolverlo. El JS está en la función document.ready. Agregué un borde alrededor de la div del mapa solo para mostrar qué tan apagado está todo.

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

He solucionado el problema de superposición , pero el último problema todavía existe, es decir,

Cuando la página se carga y el mapa se procesa en document.ready() el mapa solo está visible en la esquina superior izquierda de la pantalla. Y si cambio el tamaño del navegador (maximizar, minimizar), entonces el mapa se actualiza correctamente.

Answer 1

Ejecute la siguiente función una vez que se abra el mapa:

map.invalidateSize();

Esto solucionará tu problema.

Answer 2

Esto funcionó para mí,

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

O busque en el evento de mostrar la función div y into creando el mapa

Answer 3

Lo usé con divs hided, que aparecen después de un clic. Los mosaicos tampoco estaban visibles, así que agregué map.invalidateSize () a la función jQuery donde el div está establecido visible. Espero que ayude...

Answer 4

Tengo el mismo problema para mostrar el mapa dentro de Bootstrap Tabs. Lo he arreglado usando -

 $(''#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();
})