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