javascript - 谷歌地图不显示，但添加了 dom 标签元素

Question

我正在尝试在我的网页上显示 Google map ，特别是在 Twitter Bootstrap Modal 上，我遇到了 map 未显示的问题，但 Google map Javascript SDK 使用 Google map 数据更新了我的 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>

这是我的模态:

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

最后这是我的js:

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

仅供引用，我正在使用 Laravel PHP Framework 5.4，我正在谷歌搜索这个问题，但没有结果。然而，像这样的问题有很多，但对我来说没有任何作用。

谢谢!

Answer 1

1. 从 map 元素中删除 margin-top: 1000px; 并添加高度

<div id="map" style="height: 500px"></div>

2.当模态显示时触发 map 调整大小事件

在 openmaps 函数中删除 google.maps.event.trigger(map, "resize"); 并添加以下内容:

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