Google map non viene visualizzata sul bootstrap modale

Question

Im sto progettando di mostrare una mappa di Google su un modale, ma la mappa non è che mostra dal modale

Questo è il mio codice:

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

ho fatto un ricerca per questo problema, ho ottenuto la risposta comune, è google.maps.event.trigger(map, "resize"); il problema è dove lo metto, per favore aiutatemi.

Grazie

Answer 1

google map ha problema con la "display: none" genitore.

Inizializza la mappa dopo aver visualizzato modale per la prima volta. aggiungi una classe per pulsante o collegamento che mostra modale.

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

AVVISO: l'uso "uno" e non lo uso "on"

AVVISO: anche in grado di usare modale "mostrato" ascoltatore, se questa soluzione non funziona

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

Basta cambiare il tag e il contenuto dello script in basso a:

<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

quanto riguarda la vostra ricerca si può provare a utilizzare tale funzione

all'interno di questo

$(document).ready(function(){ 

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

});