Google地圖不會出現在Bootstrap Modal中

Question

我知道這已經被問了很多，但是我仍然無法解決這個問題。 我有一個按鈕，當用戶單擊它時，將顯示一個引導程序模態，該模態顯示輸入了Google Maps的輸入。 但是Google地圖不會顯示， 除非我調整窗口大小 ，然后它會出現。

這是我的模態按鈕：

<!-- Bootstrap trigger to open modal -->
<a data-toggle="modal" href="#addLocation" data-target=".bs-example-modal-lg">
  <button class="btn btn-primary">Add Location</button>
</a>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addLocation" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Create Task</h4>
      </div>
      <div class="modal-body">

        <!-- The async form to send and replace the modals content with its response -->
        <form class="form" data-async data-target="#addLocation" action="" method="POST">
          {{ csrf_field() }}

          <div class="form-group {{ $errors->has('location') ? ' has-error' : '' }}">
            <label for="location">Create Location:</label>
            <input type="text" name="location" id="pac-input" class="form-control" placeholder="Create a location on the map"> @if($errors->has('location'))
            <span class="help-block">{{ $errors->first('location') }}</span> @endif
          </div>

          <div id="map" style="height: 500px; width: 100%"></div>

          <div class="form-group{{ $errors->has('lat') ? ' has-error' : '' }}">
            <label for="lat">Lat:</label>
            <input type="text" class="form-control input-sm" name="lat" id="lat" value="{{ old('lat') }}"> @if($errors->has('lat'))
            <span class="help-block">{{ $errors->first('lat') }}</span> @endif
          </div>
          <div class="form-group{{ $errors->has('lng') ? ' has-error' : '' }}">
            <label for="lng">Lng:</label>
            <input type="text" class="form-control input-sm" name="lng" id="lng" value="{{ old('lng') }}"> @if($errors->has('lng'))
            <span class="help-block">{{ $errors->first('lng') }}</span> @endif
          </div>

          <br />
          <button type="submit" class="btn btn-primary" id="create">Create</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

這是我的Google地圖代碼：

<script async defer src="https://maps.googleapis.com/maps/api/js?key={MY-KEY-IS-HERE}&libraries=places&callback=initAutocomplete"></script>

    <script>
        function initAutocomplete() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 34.173985,
                    lng: -83.107242
                },
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: {
                    lat: 34.3630003,
                    lng: -84.332207
                },
                map: map,
                animation: google.maps.Animation.DROP,
                draggable: true
            });
            var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
            google.maps.event.addListener(searchBox, 'places_changed', function() {
                var places = searchBox.getPlaces();
                var bounds = new google.maps.LatLngBounds();
                var i, place;
                for (i = 0; place = places[i]; i++) {
                    bounds.extend(place.geometry.location);
                    marker.setPosition(place.geometry.location);
                }
                map.fitBounds(bounds);
                map.setZoom(14);
            });
            google.maps.event.addListener(marker, 'position_changed', function() {
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();
                $('#lat').val(lat);
                $('#lng').val(lng);
            });
        } // I even added this, but still doesnt work

        $('#addLocation').on('shown', function() {
            google.maps.event.trigger(map, 'resize');
        })

    </script>

Answer 1

當使模式對用戶可見時將觸發此事件（將等待CSS轉換完成）​​。 如果是由單擊引起的，則clicked元素可用作事件的relatedTarget屬性。

來自文檔： 模式事件

它應該是：

$("#addLocation").on("shown.bs.modal", function() {
  google.maps.event.trigger(map, "resize");
});

工作示例代碼段。

 function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 34.173985, lng: -83.107242 }, zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: { lat: 34.3630003, lng: -84.332207 }, map: map, animation: google.maps.Animation.DROP, draggable: true }); var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); var i, place; for (i = 0; place = places[i]; i++) { bounds.extend(place.geometry.location); marker.setPosition(place.geometry.location); } map.fitBounds(bounds); map.setZoom(14); }); google.maps.event.addListener(marker, 'position_changed', function() { var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); $('#lat').val(lat); $('#lng').val(lng); }); } $("#addLocation").on("shown.bs.modal", function() { google.maps.event.trigger(map, "resize"); }); google.maps.event.addDomListener(window, 'load', initAutocomplete); 

 #map { height: 500px; width: 100%; } .pac-container { z-index: 2000; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <a data-toggle="modal" href="#addLocation" data-target=".bs-example-modal-lg"> <button class="btn btn-primary">Add Location</button> </a> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addLocation" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Create Task</h4> </div> <div class="modal-body"> <!-- The async form to send and replace the modals content with its response --> <form class="form" data-async data-target="#addLocation" action="" method="POST"> <div class="form-group"> <label for="pac-input">Create Location:</label> <input type="text" name="location" id="pac-input" class="form-control" placeholder="Create a location on the map"> <span class="help-block"></span> </div> <div id="map"></div> <div class="form-group"> <label for="lat">Lat:</label> <input type="text" class="form-control input-sm" name="lat" id="lat" value=""> <span class="help-block"></span> <div class="form-group"> <label for="lng">Lng:</label> <input type="text" class="form-control input-sm" name="lng" id="lng" value=""> <span class="help-block"></span> </div> <br /> <button type="submit" class="btn btn-primary" id="create">Create</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>