HERE maps show blank maptiles

Question

When I'm trying to show a map using the following html/script combination:

<div id="map_7e0c7d1b55054dc7b95e2b542da877e8" style="height: 350px; width: 600px;"></div>

var map = new nokia.maps.map.Display(
    document.getElementById('map_7e0c7d1b55054dc7b95e2b542da877e8'), {
        zoomLevel: 10,
        center: [60.18249633040953, 5.0916092724915245],
        components: [
            new nokia.maps.map.component.Behavior(),
            new nokia.maps.map.component.ZoomBar(),
            new nokia.maps.map.component.TypeSelector(),
            new nokia.maps.map.component.ScaleBar() 
        ]
    }
);

I just get a gray box with the map controls:

The network log shows that some tiles are downloaded, but one is "canceled":

Does anyone have a clue about why my map won't show?
I've double-checked the app_id and app_code.
Also, the map used to work - this happened about a month ago, with no changes made on our end as far as I can see.

Answer 1

Found the problem. Apparently Twitter Bootstrap and HERE maps doesn't play nice - a problem that also exists with Google Maps.

The solution was to add a class to the map div named here-maps and add the following css:

.here-maps img {
    max-width: none;
}