Grey Map of Google Maps inside Bootstrap Modal

Question

I have a grey Google Maps map inside a bootstrap modal.

I've tried to fix it by using google.maps.event.trigger(map, 'resize') but it doesn't work, as it doesn't load after the modal is open.

If I am executing this command in the console, it works fine.

Any idea or solution how I could fix this problem?

Answer 1

With use of the bootstrap modal events ?

$('#myModal').on('shown.bs.modal', function () {
  google.maps.event.trigger(map, 'resize');
})

Answer 2

Well, after palying around a bit I have found a solution. I call a function which is calling google.maps.event.trigger(map, 'resize') after waiting a second till the PopUp (Modal) has opened. This function is called using onclick="initMapModal()".

function initMapModal() {
setTimeout(function () {
    google.maps.event.trigger(map, 'resize');
    initMap();
}, 1000);

}

Answer 3

You should use the bootstrap modal events as described in the docs:

http://getbootstrap.com/javascript/

Then trigger the google map resize within the events callback function as follows:

$('#myModal').on('shown.bs.modal', function () { google.maps.event.trigger(map, 'resize'); })

Make sure to add this after you have created the map variable