Grey boxes appear in parts of embedded Google Map in modal box

Solution 1:

Try using the modal event handlers. I think this is the most concise (and correct) way to ensure that you are resizing after the modal is shown without rewriting any plugins:

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

UPDATE: I just realized that this solution still does not center the map properly, so I needed to add one more command:

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
})

Solution 2:

I discovered that having display: none on the map's parent element (the modal) really messed things up. I changed it to visibility: hidden just in sheer desperation to see what would happen, and it worked!

I also modified the modal JS code to set the modal to visibility: visible/hidden when the modal is shown/hid. Otherwise it would get display: none/block set again, which would create the grey boxes again.

Solution 3:

My solution for bootstrap-modal.js v 2.0

replace class "hide" for "invisible" in Modal div

<div id="map_modal" class="modal fade invisible">
...
</div>

function javascript

function open_map()
{   
   $('#map_modal').removeClass("invisible");
   $('#map_modal').modal('toggle');   
}

link html

<a href="javascript:open_map()">Open map</a>

Solution 4:

For those using bootstrap, I had to remove "fade" from my "modal" class

From

<div class="modal fade" 

to

<div class="modal" ...

I had tried the previous solutions with calling google.maps.event.trigger(map, 'resize'); but figured that

.on("shown.bs.modal" ...

was never getting called. This issue seemed to point me to removing the fade.
https://github.com/twbs/bootstrap/issues/11793

This is not an optimal solution since the fade is actually very nice to have...

Solution 5:

The problem is that if you do something like this:

$("#mapModalLink").click(function(){
  google.maps.event.trigger(map,"resize");
});

is that your modal probably wasn't open (and displayed at the right size) when the resize event is triggered. To solve this:

$("#mapModalLink").click(function(){
  $("#mapModal").show();
  google.maps.event.trigger(map, 'resize');
});

Worked for me at least :)