API javascript : Afficher des marqueurs périodiquement

**Ceylordz** · 26/04/2020, 19h17

Bonjour,

Je travaille sur une application qui a pour pub d'afficher des marqueurs selon des coordonnées que je récupère dans une base de donnée .

Je parviens à récupérer mes marqueurs au chargement de la page mais je ne sais pas comment faire pour pouvoir actualiser la position de mes marqueurs (toutes les minutes par exemple).

Voici mon code utilisant un fichier XML (contenant certains marqueurs le temps des tests :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
			  <input type="text" id="latitude" />
   <input type="text" id="longtitude" />
   <a onclick="updatePosition()" >update </a>
  </head>
 
<html>
  <body>
    <div id="map"></div>
 
    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };
 
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;
 
          // Change this depending on the name of your PHP or XML file
          downloadUrl('Generateur_XML_echo.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));
 
              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
 
              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
                  
        }
 
 
 
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
 
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };
 
        request.open('GET', url, true);
        request.send(null);
      }
 
      function doNothing() {
          }
          
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MON_API(que j'ai masquée exprès)&callback=initMap">
    </script>
 
  </body>
</html>

J'ai repris exprès le code du tutoriel Mysql-Php de google pour que ce soit lisible.

Du coup sachant que la carte de s'initialise qu'une seule fois, est ce qu'il est possible de créer une fonction JS qui contiendrait la fonction "downloadURL" par exemple pour rechercher le contenu du fichier toutes les minutes ?

Merci d'avance, je précise que mes connaissances en javascript sont très limitées :S

**Ceylordz** · 27/04/2020, 09h38

J'ai tenté de mettre mon code dans un "setInterval" pour tester (bien que ça me paraisse bien lourd) mais ça ne fonctionne pas, c'est normal ?

EDIT : Finalement ça a marché mais par contre ça reste bien lourd... il doit y avoir mieux, non ?

**NoSmoking** · 27/04/2020, 17h57

Bonjour,

Finalement ça a marché mais par contre ça reste bien lourd... il doit y avoir mieux, non ?

si tu souhaites recharger les datas tu n'auras pas bien d'autres moyens que d'utiliser un setTimeout.

Montre nous ton code à tout hasard !

**Ceylordz** · 27/04/2020, 18h29

D'accord.

Du coup voici mon code pour l'affichage de la carte et des marqueurs :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
			  <input type="text" id="latitude" />
   <input type="text" id="longtitude" />
   <a onclick="updatePosition()" >update </a>
 
 
   <div id="floating-panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteMarkers();" type=button value="Delete Markers">
    </div>
 
  </head>
 
<html>
  <body>
    <div id="map"></div>
 
    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        choc: {
          label: 'C'
        },
        bar: {
          label: 'B'
        }
      };
                
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(48.5, 7.6),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;
                
                
                setInterval(function()
                {
                
                downloadUrl('http://localhost/Code_for_WINDEV/Generateur_XML_echo.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));
 
              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
 
              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
                        
              });
            });
          });   
                
                }, 5000);
          // Change this depending on the name of your PHP or XML file
          
        }
 
 
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
 
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };
 
        request.open('GET', url, true);
        request.send(null);
      }
 
      function doNothing() {
          }
          
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MON API MASQUEE&callback=initMap">
    </script>
 
  </body>
</html>

Et voici le code qui s'occupe de la récupération des données de la base de donnée :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
//require("phpsqlajax_dbinfo.php");
 
$username="root";
$password="";
$database="geolocalisation";
 
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysqli_error());
}

// Set the active MySQL database
$db_selected = mysqli_select_db($connection,$database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysqli_error());
}
 
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysqli_query($connection,$query);
if (!$result) {
  die('Invalid query: ' . mysqli_error());
}
 
header("Content-type: text/xml");
 
// Start XML file, echo parent node
echo "<?xml version='1.0' ?>";
echo '<markers>';
$ind=0;
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'id="' . $row['id'] . '" ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
  $ind = $ind + 1;
}
 
// End XML file
echo '</markers>';
 
 
//$file = file_get_contents('http://localhost/phpEcho_google.php');
//echo $file;
/*
$markers_XML = fopen('Markers.txt','a+'); //REINITIALISATION FICHIER
ftruncate($markers_XML, 0);
fputs($markers_XML, $file);
fclose($markers_XML);
*/
 
?>

J'ai mis la partie de code récupérant les données dans un setInterval qui permet de les réactualiser toutes les 5 secondes (pour l'instant, le temps du codage).

Par contre j'ai remarqué que mon code fonctionnait parfaitement sur google chrome mais ne fonctionne pas sur Internet explorer, est ce que vous savez pourquoi par hasard ?

La carte s'affiche mais les marqueurs ne s'actualisent pas contrairement à l'utilisation sur chrome.

Il faudrait que mon code tourne sur IE car il a pour vocation a être intégré dans une application exploitant le moteur de IE...

Merci à vous.

**NoSmoking** · 28/04/2020, 10h26

A priori pas de soucis sur la mise en place de ton setInterval même si je préfère dans ce cas relancer sur le oXhr.onloadend avec un setTimeout.

Concernant le fonctionnement sous IE il peut s'agir d'un problème de cache, dans ce cas modifie ton url

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const url = "http://localhost/Code_for_WINDEV/Generateur_XML_echo.php?nocache=" + new Date().getTime();
downloadUrl(url, function (data) {
  // le code
});

Un point qui me parait bien plus gênant et qu'à chaque appel tu ajoutes des markers mais sans avoir supprimé les précédents, il te faudrait peut-être penser à les supprimer avant nouvel affichage.

**Ceylordz** · 28/04/2020, 11h11

Envoyé par NoSmoking

A priori pas de soucis sur la mise en place de ton setInterval même si je préfère dans ce cas relancer sur le oXhr.onloadend avec un setTimeout.

J'essaierai ça un peu plus tard.

Un point qui me parait bien plus gênant et qu'à chaque appel tu ajoutes des markers mais sans avoir supprimé les précédents, il te faudrait peut-être penser à les supprimer avant nouvel affichage.

C'est en projet

J'attends juste de réaliser un affichage correct avant de programmer leur suppression.

Concernant le fonctionnement sous IE il peut s'agir d'un problème de cache, dans ce cas modifie ton url

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const url = "http://localhost/Code_for_WINDEV/Generateur_XML_echo.php?nocache=" + new Date().getTime();
downloadUrl(url, function (data) {
//le code
});

Du coup je viens de tester mais ça ne résous malheureusement pas le problème, j'imagine qu'il doit y avoir un plugin utilisé qui n'est pas pris en charge par IE mais je ne vois pas du tout ce que cela pourrait être

**NoSmoking** · 28/04/2020, 16h18

Du coup je viens de tester mais ça ne résous malheureusement pas le problème

Il n'y pas de raison, vide ton cache et réessaie.

Pourquoi mon xhr ne se met pas à jour (problème de cache) ?

API javascript : Afficher des marqueurs périodiquement

APIs Google

Discussions similaires

Partager

Partager