Google map not loading inside modal

Ajith Vinayak 0
Viewed 26

Google map not loading inside modal. But it is loading without modal. I am using laravel in my project.

This is what I have done. This solution from here itself. but not working for me.

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

This is my modal. id of modal is exampleModal.

<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>
modal-dialog bootstrap-modal google-maps javascript
1 Answers

You can try this example.

$('#myMapModal').on('show.bs.modal', function() {
   /*Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-)*/
   resizeMap();
})

function resizeMap() {
   if(typeof map =="undefined") return;
   setTimeout( function(){resizingMap();} , 400);
}

function resizingMap() {
   if(typeof map =="undefined") return;
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center); 
}

For more information open this link : https://www.codeply.com/go/ZrKScrDvuE/bootstrap-load-google-map-inside-modal

Kayyum Halai0
Related