I am getting the location of the user automatically when a user check in to mark their attendance in the morning. I am sucessfully fetching the latitude and longitude coordinates and save them in the database for further usage.
From the admins panel i want the admin to see the location of the coordinates saved in the database table. For this function i have a table looking like below,
And since each of attendances recorded can have different coordinates i have placed a button with the Map marker icon. And when the admin clicks on one of the map marker icon a modal is popped up with the values of the coordinates (The lat and long)
This is how I have written the code for the table.
<table id="myTable" class="table table-bordered table-hover table-striped" style="width: 100%; text-
align: center;">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Date</strong></th>
<th><strong>Time</strong></th>
<th><strong>In / Out</strong></th>
<th ><strong></strong></th>
<th style="text-align: center; width:2%;"><strong></strong></th>
</tr>
</thead>
<br>
<tbody>
<?php
$query="SELECT employees.EMP_ID, employees.Name, attendance.* FROM employees INNER JOIN attendance ON
employees.Email = attendance.Email_Address;";
$result = mysqli_query($connect,$query);
if($result->num_rows>0){
while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<td style="text-align: center;">
<?php echo $row["Name"]; ?></td>
<td style="text-align: center;"><?php echo $row["Date_Log"]; ?></td>
<td style="text-align: center;"><?php echo $row["Time_Log"]; ?></td>
<td style="text-align: center;"><?php if ($row['IN_OUT']=="In") {
?>
<span class="badge bg-success"><?php echo $row["IN_OUT"]; ?></span>
<?php
}
else if ($row['IN_OUT']=="Out"){
?>
<span class="badge bg-danger"><?php echo $row["IN_OUT"]; ?></span>
<?php
}
?>
</td>
<td><a data-bs-toggle="modal" data-bs-target="#exampleModaldaterange"><i class="fas fa-file-pdf"
style="color: green;"></i></a></td>
<td style="text-align: center; width:2%;">
<?php
if ($row['Latitude']=="Location Not Fetched" && $row['Longitude']=="Location Not Fetched") {
?>
<span class="badge bg-info text-dark">Location Not Fetched</span>
<?php
}
else{
?>
<a data-bs-toggle="modal" data-bs-target="#exampleModallocation" latitude="<?php echo
$row['Latitude']; ?>" longgitu="<?php echo $row['Longitude'];?>" role="button" class="btn btn-
primary"><i class="fas fa-map-marker-alt"></i></a>
<?php
}
?>
</td>
</tr>
<?php } }
else {
?>
<div class="alert alert-danger" role="alert">
Oops No Records Were Found For The Search Term - <?php echo $empidsearch; ?>
</div>
<?php
} ?>
</tbody>
</table>
Note this code
<td style="text-align: center; width:2%;">
<?php
if ($row['Latitude']=="Location Not Fetched" && $row['Longitude']=="Location Not Fetched") {
?>
<span class="badge bg-info text-dark">Location Not Fetched</span>
<?php
}
else{
?>
<a data-bs-toggle="modal" data-bs-target="#exampleModallocation" latitude="<?php echo
$row['Latitude']; ?>" longgitu="<?php echo $row['Longitude'];?>" role="button" class="btn btn-
primary"><i class="fas fa-map-marker-alt"></i></a>
<?php
}
?>
</td>
I have set the lat and long values fetched from the database to the button and when on the button is cliked a modal is opened where i have 2 inputs, and on the two inputs these two lat and long coordinates are shown successfully like shown below,
And the JS code for getting the lat and long from the table to the modal is as follows,
var lat1;
var long1;
$(document).ready(function(){
$('#exampleModallocation').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
lat1=$(opener).attr('latitude');
long1=$(opener).attr('longgitu');
//set what we got to our form
$('#profileForm').find('[name="latitude"]').val(parseFloat(lat1));
$('#profileForm').find('[name="longgitu"]').val(parseFloat(long1));
console.log(lat1);
initMap(lat1, long1);
});
});
And now i have tried to attach this lat and long values to the map coordinates but i am unable to do so since there are errors thrown.
The code written for the Javascript Maps Api (Google) are as follow,
function initMap(lat1, long1) {
const myLatLng = { lat: lat1, lng: long1 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 6.927079, lng: 79.861244 },
});
const image =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
const beachMarker = new google.maps.Marker({
position: { lat: lat1, lng: long1 },
map,
icon: image,
}); }
This code is thrwoing me this error in the developers console "InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number"
The complete JS Code is as follows,
<script>
var lat1;
var long1;
$(document).ready(function(){
$('#exampleModallocation').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
lat1=$(opener).attr('latitude');
long1=$(opener).attr('longgitu');
//set what we got to our form
$('#profileForm').find('[name="latitude"]').val(parseFloat(lat1));
$('#profileForm').find('[name="longgitu"]').val(parseFloat(long1));
console.log(lat1);
initMap(lat1, long1);
});
});
function initMap(lat1, long1) {
const myLatLng = { lat: lat1, lng: long1 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 6.927079, lng: 79.861244 },
});
const image =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
const beachMarker = new google.maps.Marker({
position: { lat: lat1, lng: long1 },
map,
icon: image,
});
}
</script>
