Hi, I’m currently looking for a way to update a text of a google marker in the google map js without reloading the whole page. First my arduino send the data to my database, then my website need to fetch this particular new data without the need to refresh or pressed a button. Each time a new data is stored, the contents of the variable niveauRemplissage in googlemap.js need to be updated and the marker text need to be dynamically updates without no pressing of f5 buttons or right click > refresh
I tried to use setIntervals but to no avails.
Bellow is the query from gps.php:
public function getNiveauRemplissage(){
$sql = "SELECT message FROM donnee ORDER BY id DESC LIMIT 1";
$stmt = $this->conn->prepare($sql);
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}Here the code from my index.php
<div class="container">
<center><h1>Access Google Maps API in PHP</h1></center>
<?php
require 'gps.php';
$gps = new GPS;
$coll = $gps->getAddressName();
$coll = json_encode($coll, true);
echo '<div id="data">' . $coll . '</div>';
$allData = $gps->getPoubelleLocation();
$allData = json_encode($allData, true);
echo '<div id="allData">' . $allData . '</div>';
$niveauRemplissage = $gps->getNiveauRemplissage();
$niveauRemplissage = json_encode($niveauRemplissage, true);
echo '<div id="niveauRemplissage">' . $niveauRemplissage . '</div>';
?>
<div id="map"></div>And lastly my googlemap.js where I need to modify the contents of the variable niveauRemplissage that display the required message in the marker:
function getPoubelleLocation(allData) {
var infoWind = new google.maps.InfoWindow;
var niveauRemplissage = JSON.parse(document.getElementById('niveauRemplissage').innerHTML);
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = data.address;
content.appendChild(strong);
content.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = niveauRemplissage[0].message;
content.appendChild(text);
content.appendChild(document.createElement('br'));
var img = document.createElement('img');
img.src = 'img/poubelle.png';
img.style.width = '100px';
content.appendChild(img);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map
});
marker.addListener('mouseover', function(){
infoWind.setContent(content);
infoWind.open(map, marker);
})
})
}