Google Mapsは表示されていませんが、domタグ要素が追加されました

Question

私はマップ上にGoogleマップを表示しようとしていますが、マップは表示されませんが、Google Maps Javascript SDKは私の問題を抱えていますGoogle Mapsのデータを持つ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> 

FYI私はLaravel PHPフレームワーク5.4を使用しています、Iこの問題はグーグルではありましたが、結果はありませんでした。しかし、このような問題はたくさんありますが、それは私の仕事ではありません。

ありがとうございます！

Answer 1

高さマップ要素からmargin-top: 1000px;を削除し、追加

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

トリガマップリサイズモーダルがopenmaps関数で

はgoogle.maps.event.trigger(map, "resize");を除去示すイベントとこれを追加：

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

Answer 2

widthとheightのスタイルをマップコンテナに設定します。例style="width: 100%;height:200px;"

%またはpxのための代わりにstyle="margin-top: 1000px;"セットの

は、あなたのポップアップのスタイルに依存します。