Tengo problemas para que el mapa se muestre en un modal boostrap 5. Funciona fuera del modal. Dentro del modal, se muestran las capas predeterminadas, pero no el mapa en sí. mi funcion js
function loadMap(zoom, lat, lng) { var mapContainer = document.createElement('div'); mapContainer.style.height = '300px'; mapContainer.style.width = '600px'; document.getElementById('mapInsideModal').appendChild(mapContainer); var defaultLayers = platform.createDefaultLayers(); // Instantiate the map: var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, { zoom: zoom, center: { lng: lng, lat: lat,}, }); // add a resize listener to make sure that the map occupies the whole container window.addEventListener('resize', function () {map.getViewPort().resize();}); // Create the default UI: var ui = H.ui.UI.createDefault(map, defaultLayers); } Creé una identificación <div id="mapInsideModal"></div> en el HTML modal de Bootstrap donde quiero que se muestre el mapa.
De forma predeterminada, document.getElementById('mapInsideModal') se muestra: ninguno, por lo que el objeto del mapa no se inicializa correctamente.
Primero cree mapContainer con estilo css como "posición: absoluta; izquierda: -99999px;"
var mapContainer = document.createElement('div'); mapContainer.style.position = "absolute"; mapContainer.style.left = "-99999px";Agregue el elemento mapContainer al elemento del cuerpo.
Su mapa no se mostrará, por lo tanto, debe hacer esto document.getElementById('mapInsideModal').appendChild(mapContainer); y establezca el estilo css left: 0px; para el elemento mapContainer dentro del shown.bs.modal - vea por favor en la parte inferior de la página https://getbootstrap.com/docs/5.1/components/modal/
se muestra.bs.modal: este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones de CSS). Si es causado por un clic, el elemento en el que se hizo clic está disponible como la propiedad de destino relacionada del evento.