HERE maps show blank screen - bootstrap-5

Question

I try to use here map
when I add just map from examples
I faced with blank screen
I use bootstrap 5 and stimulus.js with symfony 5
When I remove mapsjs-ui.css map renders but without UI
And with wrong height container.
var platform = new H.service.Platform({
apikey: 'key'
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(mapTarget,
defaultLayers.vector.normal.map,{
center: {lat:52, lng:5},
zoom: 5,
pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);

Answer 1

In my experience the HERE Maps API for JavaScript can be properly integrated with many different frameworks.
Please don't remove mapsjs-ui.css
Symfony 5 - this is PHP framework on the backend side therefore please don't mix up with frontend libraries like HERE Maps API for JavaScript which run in browser. Therefore it doesn't matter which framework are you using on server side.
See please this example with bootstrap 5.2 and stimulus.
https://jsfiddle.net/erbd709j/
In this example are shown 3 maps in the grid created with help bootstrap.
/**
* Moves the map to display over Berlin
*
* #param {H.Map} map A HERE Map instance within the application
*/
function moveMapToBerlin(mapObj){
mapObj.map.setCenter({lat:52.5159, lng:13.3777});
mapObj.map.setZoom(14);
}
function openMap(idx) {
var mapObject = {};
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
mapObject.platform = new H.service.Platform({
apikey: window.apikey
});
mapObject.defaultLayers = mapObject.platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
mapObject.map = new H.Map(document.getElementById('map' + idx),
mapObject.defaultLayers.vector.normal.map,{
center: {lat:50, lng:5},
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => mapObject.map.getViewPort().resize());
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
mapObject.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(mapObject.map));
// Create the default UI components
mapObject.ui = H.ui.UI.createDefault(mapObject.map, mapObject.defaultLayers);
return mapObject;
}
// Now use the map as required...
window.onload = function () {
openMap(0);
let map1 = openMap(1);
openMap(2);
moveMapToBerlin(map1);
}