Javascript Google地图未显示，但添加了dom标记元素

我试图在我的网页上显示一个谷歌地图，特别是在Twitter引导模式上，我面临一个问题，一个地图没有显示，但是谷歌地图Javascript SDK用谷歌地图数据更新了我的DOM元素

这是我的一段代码

按钮：

<button type="button" onclick="openmaps(<?php echo $no; ?>,{!! $location->checkin->lat !!},{!! $location->checkin->long !!},{!! $location->checkout->lat !!},{!! $location->checkout->long !!}, '{{ gmdate('H', $lso->lama)  }} Jam. {{gmdate('i', $lso->lama)}} Menit. {{gmdate('s', $lso->lama)}} Detik')" class="btn btn-info" data-toggle="modal" data-target="#myModal">Detail</button>

---

在地图容器上设置
宽度
和
高度
样式

而不是设置，例如
style=“宽度：100%；高度：200px；”

%
或
px
取决于您的弹出样式。
设置地图容器上的
宽度和
高度
样式

而不是设置，例如
style=“宽度：100%；高度：200px；”

%
或
px
取决于弹出窗口的样式。
1。删除
页边距顶部：1000px并添加高度



2.显示模式时触发映射调整事件大小

在
openmaps
函数中，删除
google.maps.event.trigger（映射，“调整大小”）并添加以下内容：

$（'#myModal'）.on（'show.bs.modal'，function（）{
google.maps.event.trigger（map，“resize”）；
});
1.删除
页边距顶部：1000px并添加高度



2.显示模式时触发映射调整事件大小

在
openmaps
函数中，删除
google.maps.event.trigger（映射，“调整大小”）并添加以下内容：

$（'#myModal'）.on（'show.bs.modal'，function（）{
google.maps.event.trigger（map，“resize”）；
});
你能再解释一点吗，我不明白。尝试设置
100%
两者，如果不起作用，然后尝试
px
不幸的是设置宽度和高度不起作用，如果我通过添加到dom中的google maps数据进行检查，会出现
溢出：隐藏样式附加到我的
中，如果我要删除仅显示google徽标和标记的样式映射，但映射未显示且未完全显示。有什么想法吗？你能再解释一点吗，我不明白。尝试设置
100%
两者，如果不起作用，然后尝试
px
不幸的是，设置宽度和高度不起作用，如果我通过谷歌地图检查附加到我的dom中的数据，就会出现
溢出：隐藏样式附加到我的
中，如果我要删除仅显示google徽标和标记的样式映射，但映射未显示且未完全显示。有什么想法吗？
<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Detail Checkin</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-8">
                  <div style="margin-top: 1000px;" id="map">

                  </div>
                </div>
                <div class="col-md-4">
                  <label>Latitude Checkin</label>
                  <div id="latchekin"></div>

                  <label>Longtitude Checkin</label>
                  <div id="longcheckin"></div>
                  <hr>

                  <label>Latitude Checkout</label>
                  <div id="latchecout"></div>


                  <label>Longtitude Checkout</label>
                  <div id="longcheckout"></div>
                  <hr>    

                  <label>Lama Checkin</label>
                  <div id="waktu"></div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=<API KEY>&callback=initialize">
    </script>
<script>
var map;
function initialize() {
   var mapCanvas = document.getElementById('map');
   var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(mapCanvas, mapOptions)
}


function openmaps(id,latchekin,longcheckin,latchecout,longcheckout, lamaWaktu){
    $(".modal-body #latchekin").html( latchekin );
    $(".modal-body #longcheckin").html( longcheckin );
    $(".modal-body #latchecout").html( latchecout );
    $(".modal-body #longcheckout").html( longcheckout );
    $(".modal-body #waktu").html( lamaWaktu );
    var lat = latchekin;
    var lon = longcheckin;
    var lat1 = latchecout;
    var lon1 = longcheckout;
    latlng = new google.maps.LatLng(lat,lon)
    latlng1 = new google.maps.LatLng(lat1,lon1)
    map.setCenter(latlng);

    var marker = new google.maps.Marker({
        draggable: true,
        position: latlng,
        map: map,
        title: "checkIns Location"
    });
    google.maps.event.trigger(map, "resize");
}
</script>