How to update parts of a code when there is new data inserted in the database?

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);
			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>
			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);, function(data){
		var content = document.createElement('div');
		var strong = document.createElement('strong');
		strong.textContent = data.address;

        var text = document.createElement('text');
        text.textContent = niveauRemplissage[0].message;

		var img = document.createElement('img');
		img.src = 'img/poubelle.png'; = '100px';

		var marker = new google.maps.Marker({
	      position: new google.maps.LatLng(, data.lng),
	      map: map

	    marker.addListener('mouseover', function(){
	    	infoWind.setContent(content);, marker);

What is the connection with the Arduino and the website? Any?

Is the website hosted on the Arduino? Hosted in a completely different location?

The general/over-all question is,… how/when does the website know when to ‘check’ for an update in this database?

*(It doesnt, right?)

And this is also a bit ‘backwards’

(I mess with Arduino stuff all the time by the way)…

Your webpage would have to ‘poll’ over and over and over and over … not very efficient.

Its like:

  • calling your friends house,
  • his mom picks up
  • you ask if your friend is home
  • mom says ‘no’
  • you hang up
  • you call right back
  • his mom picks up
  • you ask if your friend is home
  • mom says ‘no’
  • you hang up
  • you call right back…(rinse and repeat)

Depending on your polling routine/cycle time… might work ok.

What you really need is a MQTT based solution (google to get a background on it)… that supports the subscribe and publish type communication.

The only works the arduino do are, collecting data from my sensors and gps module every minutes and saved them in a database. Then my website collects those data from the same database and outputs them on the screen. Currently the database is found in localhost using XAMPP.

I have scrapped this project completely, I will use AJAX to refresh the div where the googlemaps is every one minutes

Sponsor our Newsletter | Privacy Policy | Terms of Service