Google Map not loading inside my Modal with my Laravel App

Google Map not loading inside my Modal with my Laravel App

My Modal with Google Map

<!-- 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">
           <!--<iframe src="{{url('geocode')}}">Your browser isn't compatible</iframe>-->
                       <!--map-->
<div style="display: none">
      <input id="pac-input" class="controls" type="text" placeholder="Enter a location"/>
    </div>
    <div id="map"></div>
    <div id="infowindow-content">
      <span id="place-name" class="title"></span><br />
      <strong>Latitude </strong>: <span id="place-id"></span><br />
      <strong>Longitude </strong>: <span id="place-address"></span>
    </div>
<!--endmap-->  
      </div>
     
    </div>
  </div>
</div>

Google map script

 function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 11.0168, lng: 76.9558 },
  
    zoom: 13,
    draggable:true,
  });
  const input = document.getElementById("pac-input");
  // Specify just the place data fields that you need.
  const autocomplete = new google.maps.places.Autocomplete(input, {
    fields: ["place_id", "geometry", "name", "formatted_address"],
  });

  autocomplete.bindTo("bounds", map);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const geocoder = new google.maps.Geocoder();
  const marker = new google.maps.Marker({ map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: { lat: 11.0168, lng: 76.9558 } });

  marker.addListener("click", () => {
    infowindow.open(map, marker);
  });
  autocomplete.addListener("place_changed", () => {
    infowindow.close();

    const place = autocomplete.getPlace();

        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();

    if (!place.place_id) {
      return;
    }

    geocoder
      .geocode({ placeId: place.place_id })
      .then(({ results }) => {
        map.setZoom(16);
        map.setCenter(results[0].geometry.location);
        // Set the position of the marker using the place ID and location.
        // @ts-ignore TODO This should be in @typings/googlemaps.
        marker.setPlace({
          placeId: place.place_id,
          location: results[0].geometry.location,
        });
        marker.setVisible(true);
        infowindowContent.children["place-name"].textContent = place.name;
        infowindowContent.children["place-id"].textContent = lat;
        infowindowContent.children["place-address"].textContent = lng;
       
        infowindow.open(map, marker);
        
        
      })
      .catch((e) => window.alert("Geocoder failed due to: " + e));
  });
}

window.initMap = initMap;