Home » Javascript » Google Map and Bootstrap Modal Issue

Google Map and Bootstrap Modal Issue

Most of the Web developers, who use Bootstrap modal in there projects, might have experienced Google Map loading issue on the modal. What is the reason for Google Map and Bootstrap Modal Issue? Can we have a solution for fixing Google Map and Bootstrap Modal Issue? 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. When you press ‘F12’ and open the debugger window, the map displays in the full container. What is the reason for this 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 Since we are loading the map in a non-yet-defined width/height element, this happens.

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.

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

$('#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.

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

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. In Tabs also the same CSS property is used.

2 thoughts on “Google Map and Bootstrap Modal Issue

  1. Rajesh says:

    Thank you for sharing this tip for fixing google map issue on Bootstrap modal

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*