Here maps API in javascript modal window

user_8564977 0
Viewed 1159

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>

here-api javascript
3 Answers

Since you mentioned that the above code worked outside a modal popup, it is very likely that the code for instantiating the map is called too early, when the HTML of the modal is not yet added to the DOM.

The code for instantiating the map is inside the $ function, which, assuming you are using jQuery, means that this code will run as soon as the document is ready. However this event is fired before the user has opened the modal. While the code may be defined in the file of the modal, the $ function is invoked as soon as that file is loaded.

In short:

  • make sure to invoke the map instantiation code after the container <div> element is added to the DOM
  • make sure that the id you are using in the line new H.Map(...) matches the id in the html of the modal, as user stdob mentioned

Finally, not the cause of this issue but worth mentioning, make sure to add useHTTPS: true when you configure the platform object, or the map tiles won't load when you will deploy the app over HTTPS.

user_31201930

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!

user_24254960

Okay so i'm a little late, but I'll answer the question for others

put all your javascript code for the map Instantiation and display in a method like so 

function loadMap() {
........
}

And then when you would like the map to be displayed that 

loadMap()
 window.addEventListener('resize', function () {
          // For the Modal
        map.getViewPort().resize(); 
        });

Hope this helps

user_87791650
Related