heremaps/maps-api-for-javascript-examples

Load mapsjs-core.js dynamically cause H is not defined

mostafa-raafat opened this issue · 2 comments

I have a problem using mapsjs-core.js v3.1 but the problem does not exist on v3.0
When i try to load here map dynamically i get the following error

        urls = ["https://js.api.here.com/v3/3.1/mapsjs-core.js",
            "https://js.api.here.com/v3/3.1/mapsjs-service.js",
            "https://js.api.here.com/v3/3.1/mapsjs-mapevents.js",
            "https://js.api.here.com/v3/3.1/mapsjs-ui.js"];

    urls.forEach(function (url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        head.appendChild(script);
    });
Uncaught ReferenceError: H is not defined at mapsjs-service.js:7
mapsjs-service.js:7
mapsjs-mapevents.js:7 
Uncaught ReferenceError: H is not defined at mapsjs-mapevents.js:7
mapsjs-mapevents.js:7
mapsjs-ui.js:7 Uncaught ReferenceError: H is not defined at mapsjs-ui.js:7

Yeah, the thing is that https://js.api.here.com/v3/3.1/mapsjs-core.js is not there when https://js.api.here.com/v3/3.1/mapsjs-service.js already there. It's because of the core script really heavier compare ~261kb vs ~31.3kb. Solved the same issue with loading scripts synchronously.

Or just load core one, then does not matter, others can be loaded in parallel.

@vadym1930 suggestion is correct. All modules depend from mapsjs-core.js, so it has to be loaded first.

Alternatively, you can also use a single bundle mapsjs.bundle.js which contains all modules. It can be imported as an ES6 module. More on that here:
https://developer.here.com/documentation/maps/3.1.16.1/dev_guide/topics/get-started.html