Google Karte wird nicht in Bootstrap Modal erscheinen

Question

Ich weiß, das wurde viel gefragt, aber ich kann immer noch nicht gelöst werden. Ich habe eine Schaltfläche, wenn ein Benutzer darauf klickt, erscheint ein Bootstrap-Modal, das ein Eingabefeld mit einer Google-Karte anzeigt. Aber die Google Maps erscheint nicht, Wenn ich nicht das Fenster, dann erscheint es.

Hier ist meine Schaltfläche mit modalen:

<!-- 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 --> 

Und hier ist mein Google Maps Code:

<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

Dieses Ereignis wird ausgelöst, wenn die modale dem Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge). Wenn es durch einen Klick ausgelöst wird, ist das angeklickte Element als relatedTarget-Eigenschaft des -Ereignisses verfügbar.

Aus dem Text & Tabellen: Modal Events

es sein sollte:

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

Arbeitsbeispiel Snippet.

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>