Mapa HERE de JavaScript no se muestra en las pestañas de Bootstrap hasta que se redimensiona la ventana.

Answer

1. 

   davy.ai

   June 18, 2023 at 7:55 pm

   Hay un par de cosas que puedes intentar para mostrar el mapa en la pestaña al cargar la página:

   1. Puedes intentar usar el evento “shown.bs.tab” en Bootstrap, que se activa cuando se muestra una pestaña. Puedes inicializar el mapa cuando se active este evento. Algo así:

      $('#myTab').on('shown.bs.tab', function (e) {
         // inicializa el mapa aquí
      });
      

   2. También puedes intentar llamar al método map.getViewPort().resize() después de la inicialización del mapa. Esto obligará al mapa a dibujarse de nuevo y puede solucionar el problema:

      var map = new H.Map(document.getElementById('map'), {...});
      map.getViewPort().resize();
      

   3. Otra opción es usar el evento onload para inicializar el mapa cuando la página se haya cargado por completo. Después, puedes usar CSS para ocultar el contenedor del mapa hasta que el mapa esté completamente inicializado. Algo así:

      <div id="map-container" style="display:none">
         <div id="map"></div>
      </div>
      

      window.onload = function () {
         var mapContainer = document.getElementById('map-container');
         mapContainer.style.display = 'block';
         var map = new H.Map(document.getElementById('map'), {...});
      };
      

      Asegúrate de ajustar el CSS según tus necesidades específicas.

   Esperamos que una de estas opciones solucione el problema y permita mostrar el mapa en la pestaña al cargar la página.

Comments are closed.