Overcoming Maps (Google Map) that are not Displayed on Modal

When I use modal to display maps (Google Maps), the map does not appear. For some reason? after resizing the screen size, the map can appear. Maybe because the div in modal is dynamic or responsive. Map is empty, only gray. The solution to this problem I found on Stackoverflow. MarcoK provides an explanation of the answer to this problem. Google Maps is going to display the gray area (gray) when placed in a dynamic element. Because of that, we need to call the "resize" function when the modal animation is complete. Bootstrap 3:

$(“#modal-peta”).on(“shown.bs.modal”, function () {
      google.maps.event.trigger(peta, “resize”);
});

Bootstrap 2:

$(‘#modal-peta’).on(‘shown’, function () {
     google.maps.event.trigger(peta, “resize”);
});

#modal-petais the name of the id of the modal element where the map is displayed and the variable petais the object variable from the map (Google Maps). The code above, written in functions initialize()or map preparation, see the previous tutorial . Reference:


http://stackoverflow.com/a/11743005

Reference: https://www.petanikode.com/google-map-modal/