CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapgoogle-maps-api-3
Andreas Schantl
Andreas Schantl

Reputation: 131

Grey Map of Google Maps inside Bootstrap Modal

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?

Upvotes: 1

Views: 1377

Answers (3)

Hallsofcode
Hallsofcode

Reputation: 1

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

Upvotes: -1

BENARD Patrick
BENARD Patrick

Reputation: 30975

With use of the bootstrap modal events ? 

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

Upvotes: 3

Andreas Schantl
Andreas Schantl

Reputation: 131

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);

}

Upvotes: 0

Related Questions