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

Question

我试图在我的网页上显示谷歌地图，特别是在Twitter Bootstrap模式，我面临一个问题，地图不显示，但Google Maps 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> 

这里是我的情态：

<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框架5.4，我是谷歌搜索这个问题，但没有结果。然而，这样的问题很多，但对我来说没有任何作用。

谢谢！

Answer 1

1.从地图元件取出margin-top: 1000px;并添加高度

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

2.触发地图调整大小时的模态所示

在openmaps函数除去google.maps.event.trigger(map, "resize");事件和加入：

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

Answer 2

在地图容器上设置width和height样式。

相反style="margin-top: 1000px;"集，例如style="width: 100%;height:200px;"

%或px取决于您的弹出风格。