I successfully integrated a Google map into a large modal using Bootstrap 4. However, I encountered an issue where the map would not display when clicking the fullscreen button within the modal. I am struggling to find a solution for this problem. How can I fix it?
Before:
https://i.sstatic.net/YkyAk.png
(source: image.ibb.co)
After:
Here is my JavaScript code:
$(document).ready(function() {
var marker, i;
var markers=[];
function load_map(){
if (typeof google === 'object' && typeof google.maps === 'object') {
var myLatLng = new google.maps.LatLng(<?=$row->lat?>,<?=$row->lon?>);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 20,
center: myLatLng,
fullscreenControl: true,
scaleControl:true,
streetViewControl:true,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infowindow = new google.maps.InfoWindow();
//set markers
var locations=<?=json_encode($kordinat)?>;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: {
url:base_url+'assets/base/images/marker_black.png'
}
});
markers.push(marker);
}
//target marker
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: myLatLng,
map: map
});
markers.push(marker);
var markerCluster = new MarkerClusterer(map, markers,{imagePath: base_url+'assets/base/images/m'});
map.setCenter(myLatLng);
}else{
$('#show-map').slideDown();
$('#map').slideUp();
alert('Tidak dapat memuat peta ! Periksa koneksi internet !');
}
}
$('#show-map').click(function(){
$(this).slideUp();
$('#map').slideDown();
setTimeout(function(){load_map()}, 1000);
});});
This is my HTML code:
<div class="modal fade modal-3d-slit show" id="modal-detail" aria-labelledby="exampleModalPrimary" role="dialog" tabindex="-1"><div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="ribbon ribbon-corner ribbon-info ribbon-reverse">
<a href="#" data-dismiss="modal">
<span class="ribbon-inner"><i class="icon md-close" aria-hidden="true"></i></span>
</a>
</div>
<h4 class="modal-title"><span class="icon md-account-circle"</span>Detail Izin</h4>
</div>
<div class="modal-body"><style type="text/css">li.list-group-item:hover{background: #eeeeee}</style>
<div class="nav-tabs-animate nav-tabs-inverse nav-tabs-horizontal" data-plugin="tabs"><ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link" data-toggle="tab" href="#tab-pemohon" aria-expanded="false">Pemohon</a></li>
<li class="nav-item" role="presentation"><a class="nav-link active" data-toggle="tab" href="#tab-izin" aria-expanded="true">Izin</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" data-toggle="tab" href="#tab-persyaratan" aria-expanded="false">Persyaratan</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" data-toggle="tab" href="#tab-tindakan" aria-expanded="false">Riwayat Tindakan</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane animation-scale-up mt-10 active" id="tab-izin" role="tabpanel" aria-expanded="true">
<table class="table table-hover"></table>
<button type="button" class="btn btn-primary waves-effect waves-classic btn-block btn-lg" id="show-map"><i class="icon md-map"></i> Show Map</button>
<div id="map" style="height: 400px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>