Here maps API in javascript modal window

Question

I'm using HERE maps API in my service. But I have a problem. Maps is not display in my pop-ups. There is maps block is loading, but map canvas not. There are all config elements is displaying, but map terrain not.

Here my js:

$(function () {
    if (!companyID) {
        return;
    }

    var platform = new H.service.Platform({
        'app_id' : [my_here_app_id],
        'app_code' : [my_here_app_code]
    });

    var coordinates = {
        lat: 45,
        lng: 45
    };

    map = new H.Map(document.getElementById('mapContainer'),
        platform.createDefaultLayers().normal.map, {
            center: coordinates,
            zoom: 15
        });
});

This code I'm using in modal window html template. There are no errors. If I used this code without popup, it's working. I tried to use:

map.getViewPort().resize(); 

, but it was not help. Does anybody know, how fix it?

My html:

<div class="dialog-window js-edit-field-window" style="width: 780px; margin-left: -400px; margin-top: 50px; display: block;">
<div class="dialog clear-basket">
    <form action="http://local.misteram.com.ua/order/621/update-user-address" class="js-window-form" method="POST">
        <div class="title">Редактирование адрес клиента</div>
        <div class="content"><style>
            .user-address-text-field {
                margin: 0 5px;
            }
        </style>

            <div class="js-user-data-form" data-order-id="621">

                <div id="mapContainer" style="width: 740px; height: 200px; border: 1px solid rgb(27, 198, 227); position: relative; overflow: hidden;"></div>

            </div>
        </div>
        <div class="buttons">
            <input type="submit" value="Сохранить" class="confirm btn js-edit-window-button-submit">
            <div class="edit-field-ajax-loader">
                <img src="http://local.misteram.com.ua/images/checkout_loading.gif">
            </div>
            <input type="button" value="Закрыть" class="close btn js-edit-window-button-cancel js-close-edit-field-window">
        </div>
    </form>
</div>
<div class="ngdialog-close"></div>

Answer 1

You can try to set timeout on resizing, it seems that view port is not fully initialized at the moment

setTimeout(function () {
    map.getViewPort().resize()
}, 100);

Hope this will help!