Google map shows gray background unless you resize it

Question

This is on a modal.

I've seen other solutions to add the resize event on google map after the map is loaded but it doesn't work.

I tried this

setTimeout(function () {
    google.maps.event.trigger(map, "resize");
}, 3000)

and it still doesn't work

Answer 1

The map might be hidden at first so you need to initiate the map again when the map is shown