How to pass data from MySQL to Google Maps - php

Question

I'm confused about how to pass data from PHP to my google maps API.
<script>
<?
$dbFirst = new database;
$dbFirst->query("SELECT getLatitude,getLongitude FROM t_report
WHERE phoneNumber='$idimei' AND tanggal BETWEEN '$tgl1 00:00:00' and '$tgl1 23:59:59' AND (km IS NOT NULL AND km !='') ORDER BY ID ASC LIMIT 1");
$rowFirst=$dbFirst->tampilkan();
while ($rowFirst=$dbFirst->tampilkan()){
$lat=$rowFirst['getLatitude'];
$lon=$rowFirst['getLongtitude'];
}
?>
var marker;
function initMap() {
var mark1 = {lat:X, lng:Y};
var map = new google.maps.Map(document.getElementById('map'), {
center: mark1,
zoom: 18
});
marker = new google.maps.Marker({
position: mark1,
animation: google.maps.Animation.DROP,
map: map
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
how do I put $lat and $lon to my mark1 X and Y variable? I'm confused on how to pass data outside PHP.
Thanks for answering

Answer 1

You can use the following method to pass data from PHP variable to JS
Suppose this is where you are querying data from DB and storing it in a variables $lat and $lon
<?php
//data from DB
$lat = "xx.xx";
$lon = "xx.xx";
?>
<script>
// then echo it into the js
// and assign to a js variable
let lat = '<?php echo $lat ;?>';
let lon = '<?php echo $lon ;?>';
// then
function initMap() {
var mark1 = {lat:lat, lng:lon};
var map = new google.maps.Map(document.getElementById('map'), {
center: mark1,
zoom: 18
});
marker = new google.maps.Marker({
position: mark1,
animation: google.maps.Animation.DROP,
map: map
});
marker.addListener('click', toggleBounce);
}
</script>```

Answer 2

To pass variable $lat and $lon from PHP to X and Y in javascript you can do like this:
var marker;
var X ="<?php echo $lat; ?>";
var Y ="<?php echo $lon; ?>";
or more shorter:
var marker;
var X =<?$lat?>;
var Y =<?$lon?>;