Multiple markers map in modal - Map centered only at first load

[alladas]

Hi @tonydspaniard
Hi All,
Great and flexible extension.
Thanks for sharing it.

I am using it to display in a bootstrap modal view, a map with multiple markers from database.
After the main view loaded, the modal view is displaying the map exactly as I need.
Centered according to all markers bounds.

The problem is the next attempts to open the modal.
Without refreshing the page, the map still contains all markers but is no more centered as previously.
I wonder how to fix it?
Here is my code:
=== view ===
`...
use yii\bootstrap\Modal;
use dosamigos\google\maps\MapAsset;

MapAsset::register($this);

$this->registerJs("
$('#artworkLocations').on('show.bs.modal', function (e) {
var btn = $(e.relatedTarget);
var dataUrl = btn.data('url');
var modal = $(this);
modal.find('.modal-body').load(dataUrl);
});
");`

=== modal view ===
`use dosamigos\google\maps\Map;
use dosamigos\google\maps\LatLng;
use dosamigos\google\maps\overlays\Marker;
use dosamigos\google\maps\overlays\InfoWindow;
use dosamigos\google\maps\LatLngBounds;
use yii\helpers\Html;

...
// Setting a default center coordinates for proper initialization
$center = new LatLng(['lat' => $defaultCenter->lat, 'lng' => $defaultCenter->lng]);
$map = new Map([
'center' => $center,
'zoom' => 5,
'width' => '100%',
'height' => 400,
'containerOptions' => [
'id' => 'artworkItemsMap'
]
]);

foreach ($data as $place) {
    // Add markers
    $name = (!empty($place['name'])) ? $place['name'] : Yii::t('frontend', 'Not set');
    $coord = new LatLng(['lat' => $place['coordinates']->lat, 'lng' => $place['coordinates']->lng]);
    $marker = new Marker([
    'position' => $coord,
    ]);
    // Adding InfoWindow to the marker
    $marker->attachInfoWindow(
        new InfoWindow([
        'content' => Html::tag('p',$name,['class'=>'description-block'])
        ])
    );
    
    $map->addOverlay($marker);
}
$boundsCenter = LatLngBounds::getBoundsOfMarkers($map->getMarkers())->getCenterCoordinates();
$map->setCenter($boundsCenter); 

echo $map->display();

$this->registerJs("itemsMap = document.getElementById('artworkItemsMap'); setTimeout( function(){ google.maps.event.trigger(itemsMap, 'resize'); }, 400);");`

[tonydspaniard]

When you open the modal next time, you must force resize the map. Make sure you can call the map instance from outside.

[alladas]

@tonydspaniard
You are really fast. Thanks.
$this->registerJs("itemsMap = document.getElementById('artworkItemsMap'); setTimeout( function(){ google.maps.event.trigger(itemsMap, 'resize'); }, 400);");
will not force it to resize?
May you provide me with an example?
I gave a look at other posts without finding similar case.
Many thanks for your reactivity.

[uzkurama]

any other solution with grey box?