El mapa HERE no se carga al cargar la página, solo muestra el logotipo y los derechos de autor de HERE, pero se carga con una función al hacer clic en un botón. El siguiente código está ligeramente adaptado de los documentos HERE ( https://developer.here.com/documentation/maps/3.1.30.3/dev_guide/topics/map-controls-ui.html ). Quiero que el mapa se cargue con la página, no después de hacer clic en un botón. ¿Qué me estoy perdiendo?
<div id="map" style="height: 400px; width: 100%;"></div> $(function() { let platform = new H.service.Platform({ 'apikey': api_key }); loadMap ({ lat: <?php echo round($obj->getLatitude(), 4); ?>, lng: <?php echo round($obj->getLongitude(), 4); ?> }); function loadMap (position) { let defaultLayers = platform.createDefaultLayers(); let map = new H.Map( document.getElementById('map'), defaultLayers.vector.normal.map, { zoom: 16, center: position, } ); }); });[EDITAR] He estado luchando durante días tratando de averiguar por qué el mapa no se cargaría con el ejemplo de código muy básico. ¡Y accidentalmente cerré la consola de desarrollo del navegador y el mapa apareció de repente! ¡¿Que?!...
Entonces, el problema es que el mapa no aparecerá en la carga de la página hasta que se cambie el tamaño de la ventana. Entonces, ¿qué puedo hacer para activar eso para que aparezca el mapa?
Parece que el backend de PHP genera el código para el navegador.
Necesita verificar dos veces lo que se genera. Parece que el contenedor del mapa
<div id="map" style="height: 400px; width: 100%;"></div>no está listo en HTML DOM pero el script ya se inició.
Compare un documento de resultados (el generado por PHP-backend) con la siguiente estructura:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /> </head> <body> <div id="map" style="height: 400px; width: 100%;"></div> <script> Your script here! - It should be latest element of body-element </script> </body> </html>