Google Map not loading in bootstrap 5 modal

Question

Google Map not loading in bootstrap 5 modal. I am using V2 of Google Api and Bootstrap 5 modal.

This is my code for modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Search your location</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
           <div id="map"></div>
                
      </div>
     
    </div>
  </div>
</div>

This is my script for Google map

<script>  
let map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}
window.initMap = initMap;
</script>

To solve this issue I have used following script

<script>
    $('#exampleModal').on('shown.bs.modal', function () 
{
    google.maps.event.trigger(map, "resize");
});
</script>