0

HERE map doesn't load on page load, it only shows the HERE logo and copyright, but it loads with a function on clicking a button. The below code is slightly adapted from the HERE docs (https://developer.here.com/documentation/maps/3.1.30.3/dev_guide/topics/map-controls-ui.html). I want the map loaded with the page, not after clicking a button. What am I missing?

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

[EDIT] I've been struggling for days trying to figure out why the map wouldn't load with the very basic code example. And I accidentally closed the browser Development console and the map appeared all of a sudden! What the?!...

So the problem is the map won't appear on page load until the window is resized. So what can I do to trigger that to make the map to appear?

linuxoid
  • 1,415
  • 3
  • 14
  • 32

1 Answers1

0

It seems the code for browser is generated by PHP backend.

You need double check what is generated. It seems that map container

<div id="map" style="height: 400px; width: 100%;"></div>

is not ready in HTML DOM but the script is already started.

Please compare a result document(that generated by PHP-backend) with follow structure:

    <!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>