javascript - Google map not showing on bootstrap modal -

im planning show google map on modal, map not showing modal

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

i did research problem, ang got common answer, google.maps.event.trigger(map, "resize"); problem put it, please me.

thanks

google map has problem "display:none" parent.

initialize map after showing modal first time. add class button or link show modal.

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

notice : use "one" , dont use "on"

notice : can use modal "shown" listener, if solution doesn't work

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

just change bottom script tag , contents :

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