Google Map and Bootstrap Modal Issue

Google Map and Bootstrap Modal creating an issue in your webpage? Or Google Map not filling in Modal window?

Most of the Web developers, who use Bootstrap modal in there projects, might have experienced Google Map and Bootstrap Modal Issue or Google Map loading issue on the modal or Map rendering incomplete inside modal window. Showing Google Map inside a Bootstrap modal window is an issue most of the time. What is the reason for google map not showing properly in bootstrap modal window? Or what is Google Map Modal Issue? Can we have a solution for fixing Google Map and Bootstrap Modal Issue? First, let us see how the Google map and Bootstrap modal Issue is. The following screenshot shows how Google map is loading on a Bootstrap modal.

Google Map and Bootstrap Modal Issue Screenshot

Google Map and Bootstrap Modal Issue

 

Google map is partially loaded or it is loading in its container, not as per the width and height which we have mentioned for the container. That means, the google map is not displayed in full width, which is available in the container. When you press ‘F12’ and open the debugger window, the map displays in the full container. What is the reason for this Google Map and Bootstrap Modal Issue?

Google map and display: none

The reason for Google Map display issue is that, when we load the map or when the map is rendered, modal is hidden or display:none. That means, the container does not have a width and height defined when it is in a ‘hidden’ or ‘display: none’ state. Or the initial width and height of the container is 0. Since we are loading the map in a non-yet-defined width/height element, Google Map and Bootstrap Modal Issue occurs.

Solution for Google Map and Bootstrap Modal Issue

The solution for Google Map and Bootstrap Modal issue is that, when we open modal, we should re-size the map. When we open the modal, the modal div changes its size, ie. it has got a specific width and height now. At the same, as modal opens, the google map also should be resized. So that it will take the full width or the area which is available in the container.

Javascript for solving Google Map and Bootstrap Modal Issue

google.maps.event.trigger(map, 'resize');

Here, we are calling a re-size trigger event on Google map. re-size event is triggered.

$('#mymodal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(42.7369792, -84.48386540000001));
});

Here we have to set the center also after re-sizing the map. Otherwise, the map will not be centered, based on the pins or as per the latitude and longitude we have given.

Sometimes, we have noticed that when we open the console, Google map re sizes and takes the full width of the container. What would be the reason for displaying properly, when console is opened? The reason why Google Map is re-sized when the console is open is that, it forces the container to re-size and at the same time map is re-sized and refreshed and displays properly.

Google Map Loading Issue in other occasions

Have you even faced this kind of issue in any other situations? Other than modal, in any containers? This issue occurs not only on Bootstrap Modal window, any pop ups for which we are using ‘display: none’ css properly. When we load/render Google map on a div, for which we set ‘display: none’ property and we make it ‘display: block’. The same issue occurs in Jquery UI tabs. Because, Tabs also use the same CSS property.

Demo for google map on pop up window

Google Map and Bootstrap Modal demo

If you find this tips useful, please feel free to leave a comment or ‘like it’

label, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

About the author