How to add google map in bootstrap modal

Question

I am using Google Embed map option to insert a map into Bootstrap Modal, but the modal shows up with the shape of the map present, but only part of the map is displayed, the

Answer 1

It has to do with the modal being display: none initially. I think this makes the Google Maps JavaScript inside the iframe unable to work properly. To see for yourself try removing the .modal class and open the modal.

The easiest solution might be to inject the iframe when the modal is opened for the first time, using the shown.bs.modal event:

$('#myModal').on('shown.bs.modal', (function() {
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('');

      mapIsAdded = true;
    }    
  };
})());

or see this Codepen

Next to this the iframe has a fixed width="800" attribute. I would suggest you to change this into width="100%" as the modal window doesn't have a fixed width.