HERE maps don't load on page load, only on window resize or button click

Developing with Concrete
1

Has anyone tried HERE.com maps in Concrete CMS?

I’m trying to show a map in a Dashboard page (e.g. this simplest code example: Guide - HERE Maps API for Javascript - HERE Developer) but it doesn’t show with the page load, it only shows blank tiles with a logo and copyright. Until I resize the window. If I reduce the window size in any way, the map appears right away. It also shows on a button click event. But not on page load.

Does anyone have any idea why that happens? How can I fix it?

2

You could try triggering a resize event in a document on_load handler, or on whatever load event here maps fires. In either case you may need to delay for 1 ms, not for the delay, but to allow the JS engine to process the event queue before coming back to you.

I haven’t tried here maps, but similar has worked on other 3rd party scripts with the same issue.

3

I’ve already tried forcing window and document event triggering - doesn’t help. Tried delay - nothing.

4

The only other idea I have is to delay loading / initializing the map code and all map assets. Either directly or with an ajax back to the server. Doing that on some scripts may introduce further problems.

5

It seems the problem is not with the map loading on a page, it’s only a problem when the map is on a tab of the page. If I move the map div outside of the tabs, it all works fine. When the map is on tabs, it fails loading. Must be something to do with the tab being hidden or something.

6

The same issue happens with many maps scripts. If you look at the core Google Map block, the JS does a poll loop to wait until it is visible before initialising.

The problem arises because maps need a size, and a size doesn’t exist when hidden.

7

I’ve finally got it! I thought I needed to load the map on either window or document load, that may be true without tabs, but with tabs it’s about the tab shown.bs.tab event:

$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
    if (lat > 0 && lng > 0) {
        loadMap({ lat: lat, lng: lng });
    }
});

PS. I used LocationIQ maps with forward and reverse geocoding in my packages before which is based on OpenStreetMaps. Now I found out that the HERE maps beat it hands down. HERE maps are so much better, documentation is brilliant. AND they give you heaps of free geocoding queries per month. So I’m switching all my packages to HERE maps now. :+1: :+1: :+1:

8

That needed an improvement to avoid initiating maps every time a tab was clicked, so it only initiates the map once and only on the right tab:

let map_loaded = false;

$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
    if ($(this).attr('aria-controls') === 'tab-location' && !map_loaded) {
        let position = new H.geo.Point(55.7538, 37.6201);
        
        lat = <?php echo round($obj->getLatitude(), 4); ?>;
        lng = <?php echo round($obj->getLongitude(), 4); ?>;
        
        if (lat > 0 && lng > 0) {
            position = new H.geo.Point(lat, lng);
        }
        
        loadMap(position);
        map_loaded = true;
    }
});