Google Karte nicht Bootstrap-modal

Question

Im zu zeigen ist die Planung über eine Google-Karte auf einem modalen zeigen, aber die Karte nicht aus den modalen

Dies zeigt, ist mein Code:

<div style="margin-top:-7px;"> 
<button class="btn btn-default pull-right btn-mini " style="margin-right:5px;" data-toggle="modal" data-target="#myModal7"><i class="fa fa-globe"></i> Show Map</button> 
</div> 

<div class="modal inmodal fade" id="myModal7" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog modal-md"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title">Address</h4> 
      </div> 
      <div class="modal-body">           
      <div class="panel mb25 mt5" style="width:500px; margin:0 auto; padding:10px;"> 
       <div id="map" style="width: 500px; height: 500px;"></div> 
      </div> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-white" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
<script type="text/javascript"> 
var address = 'Japan'; 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 16 
}); 
var geocoder = new google.maps.Geocoder(); 

geocoder.geocode({ 
    'address': address 
}, 
function(results, status) { 
if(status == google.maps.GeocoderStatus.OK) { 
    new google.maps.Marker({ 
    position: results[0].geometry.location, 
    map: map 
    }); 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(results[0].geometry.location); 
    } 
}); 
</script> 

Ich habe eine Forschung für dieses Problem, ang ich habe die gemeinsame Antwort, es ist google.maps.event.trigger(map, "resize"); das Problem ist, wo werde ich es, bitte helfen Sie mir.

Dank

Answer 1

google map hat Problem mit "display: none" Eltern.

initialisieren Sie Ihre Karte, nachdem Sie Modal zum ersten Mal angezeigt haben. fügen Sie eine Klasse für Schaltfläche oder Verknüpfung hinzu, die Modal anzeigt.

$('.modal-opener-btn').one('click', function(){ 
//putt your code here 
}); 

HINWEIS: Verwendung "one" und verwenden Sie nicht "auf"

HINWEIS: auch modal verwenden können "gezeigt" Hörer, wenn diese Lösung nicht funktioniert

$('#myModal7').on('shown', function(){ 
//putt your code here 
}); 

Ändern Sie einfach das untere Script-Tag und den Inhalt in:

<script type="text/javascript"> 
    function init(){ 
     var address = 'Japan'; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 16 
     }); 
     var geocoder = new google.maps.Geocoder(); 

     geocoder.geocode({ 
      'address': address 
     }, 
     function(results, status) { 
     if(status == google.maps.GeocoderStatus.OK) { 
      new google.maps.Marker({ 
      position: results[0].geometry.location, 
      map: map 
      }); 
      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(results[0].geometry.location); 
      } 
     }); 
    } 

    $('#myModal7').on('shown.bs.modal', function(){ 
    init(); 
    }); 
</script> 

Answer 2

Ihre Forschung in Bezug auf die Sie versuchen können, die Funktion

in diesem

$(document).ready(function(){ 

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

});