Карта Google не отображается на модале начальной загрузки

Я планирую показать карту Google на модале, но карта не отображается из модального

Это мой код:

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

Я провел исследование для этого проблема, и у меня есть общий ответ, это google.maps.event.trigger(map, "resize"); проблема в том, куда я его положу, пожалуйста, помогите мне.

Благодаря