谷歌 map 未在模式内加载

Question

Google map 未在模态中加载。 但它是在没有模态的情况下加载的。 我在我的项目中使用 laravel。

这就是我所做的。 这个解决方案来自这里本身。 但不为我工作。

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

这是我的模态。 模态的 id 是 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>

Answer 1

你可以试试这个例子。

$('#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); 
}

有关更多信息，请打开此链接： https://www.codeply.com/go/ZrKScrDvuE/bootstrap-load-google-map-inside-modal