I'm currently working on a website that has the capability to display users' locations and generate maps based on their coordinates. I have successfully implemented the functionality for showing a single user's location on the map using modal, however, when trying to display multiple user data from the database, the map fails to show up. I've been struggling to identify the root cause of this issue, so any assistance would be highly appreciated. Below is a snippet of the code I am working with:
while($u=mysqli_fetch_array($query)){
//$coordinate format from database is 123.456,789.876
$latlng = explode(",",$coordinate);
$lat = $latlng[0];
$lng = $latlng[1];
echo "
<tr>
<td>
<script src='https://maps.googleapis.com/maps/api/js?callback=init$modal'></script>
<script type='text/javascript'>
function init$modal() {
var map$modal;
var latlng$modal = {lat: $lat, lng: $lng};
var myOptions = {
zoom: 16,
center: latlng$modal,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map$modal = new google.maps.Map(document.getElementById('map_canvas$modal'),myOptions);
var marker = new google.maps.Marker({
position: latlng$modal,
map: map$modal
});
$('#myModal$modal').on('shown.bs.modal', function(e) {
google.maps.event.trigger(map, 'resize');
return map.setCenter(latlng$modal);
});
}
</script>
<div class='modal fade' id='myModal$modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
</div>
<div class='modal-body datauser'>
<table class='table'>
<tr>
<td style='vertical-align: top;'>
<div class='mapcaller' id='map_canvas$modal' style='width:100%; height:250px;'></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<button type='button' data-toggle='modal' data-target='#myModal$modal' class='btn btn-default btn-sm' style='float: right; margin-right: 5px; margin-left: 5px;'>
<i class='fa fa-info-circle'></i> See data
</button>
</td>
</tr>";
$modal+=1;
Incorporating bootstrap's modal, each map is nested within a loop inside the modal structure. Your insights and suggestions are greatly valued.