谷歌地圖不顯示，但添加了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取決於您的彈出風格。