Javascript 谷歌地图未在引导模式上显示

我计划在模态上显示谷歌地图，但该地图不会在模态上显示

这是我的代码：

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

显示地图
&时代；接近
地址
接近
var地址='日本'；
var map=new google.maps.map（document.getElementById（'map'），{
缩放：16
});
var geocoder=new google.maps.geocoder（）；
地理编码({
“地址”：地址
}, 
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
新的google.maps.Marker({
位置：结果[0]。geometry.location，
地图：地图
});
google.maps.event.trigger（映射，'resize'）；
map.setCenter（结果[0].geometry.location）；
}
});

我对这个问题做了研究，我得到了一个常见的答案，就是

google.maps.event.trigger（map，“resize”）
谢谢
谷歌地图与“显示：无”父项有问题

在第一次显示模式后初始化地图。
为显示模式的按钮或链接添加类

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

注意：使用“一”，不要使用“开”

注意：如果此解决方案不起作用，也可以使用模态“显示”侦听器

只需将底部脚本标记和内容更改为：

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


函数init（）{
var地址='日本'；
var map=new google.maps.map（document.getElementById（'map'），{
缩放：16
});
var geocoder=new google.maps.geocoder（）；
地理编码({
“地址”：地址
}, 
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
新的google.maps.Marker({
位置：结果[0]。geometry.location，
地图：地图
});
google.maps.event.trigger（映射，'resize'）；
map.setCenter（结果[0].geometry.location）；
}
});
}
$（'#myModal7'）.on（'show.bs.modal'，function（）{
init（）；
});
关于您的研究，您可以尝试使用该功能

在这里面

$(document).ready(function(){

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

});

我也有同样的问题，这就是我今天的解决方案：
确保在调用模式页面的初始页面上有jQuery:
这正在工作，但标记已消失，我将如何放回标记？仔细查看后，我认为您可以将我的解决方案与之前的解决方案结合起来。我的意思是用对init（）函数的调用替换google.maps.event.trigger（map，'resize'）。我只是将代码添加到脚本的底部，它现在正在工作，映射正在显示，但标记已经确定。您是否用Bojbaj中的脚本更改了上一个脚本？
$(document).ready(function(){

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

});