Google Maps not showing but dom tag element added – Twitter bootstrap

I’m trying to display a Google Maps on my webpage specially on Twitter Bootstrap Modal, I’m facing a problem that a maps not showing, but the Google Maps Javascript SDK updated my DOM Element with the google maps data.

Here’s a piece of my code.

Button:

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

Here is my Modal:

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

and finally this is my 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 I’m using Laravel PHP Framework 5.4, I was googling for this problem but no results. However there’s a lot of problem like this but not any of that work on me.

Thanks!