[Google Maps] PDO en live

Bonjour à tous,

Je me permet de solliciter votre aide car j'essaie de faire une page web
un peu comme flightradar24.

Donc je pioche mes donnés dans 2 table différente d'une base de donnée et les affiche. Jusque là ok.

Chaque ligne de ma BD correspond à un avion, et ces lignes sont mise à jours toutes les minutes ( en gros ).

Et je souhaiterai que la carte se mettent à jour, mais sans que ce soit toute la page qui se recharge.

J'ai essayé de m'inspirer de ce sujet de discussion, mais je n'ai pas réussi.

Le prb ce que je n'ai un connaissance en java quasinul.

J'ai cru comprendre qu'il fallait charger les infos à un moment précis, mais quand??

Pour l'instant j'en suis là

Code:

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
<?php
  define('PROTECTIONINCLUDE', TRUE);
include './config/bdall.php';
?>
 
<!DOCTYPE html>
<html>
  <head>
    <title>Carte de tous les avions en enregistrements</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
 
 
var map;
function initialize() {
  var mapOptions = {
    autozoom: true,
    disableDefaultUI: true,
    zoom: 5,
    center: new google.maps.LatLng(46.2293411, 6.106630699999982),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    refreshTime: 10000
      <?php
 
 
  
          $DBPDO = new PDO($dbdns1,$dbuser1 , $dbpass1,
                  array( PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
          $DBPDO-> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
          $sql = "SELECT * FROM tracker_mil_acarsdata";
          $req = $DBPDO ->query($sql);
          $sql2 = "SELECT * FROM tracker_cil_acarsdata";
          $req2 = $DBPDO ->query($sql2);
 
 
 
  ?>
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
<?php
 
while($d=$req->fetch(PDO::FETCH_OBJ)) 
    {
      ?>
      var position = new google.maps.LatLng(<?php echo $d->lat;?>, <?php echo $d->lng;?>);
      var marker = new google.maps.Marker({position: position,map: map,icon: "http://airindiavirtual.com//lib/images/inair/<?php echo $d->heading;?>.png"});
      var infowindow = new google.maps.InfoWindow({content: 'lat: <?php echo $d->lat;?> lng:<?php echo $d->lng;?>'});
 
      google.maps.event.addListener(marker, 'click', function() {infowindow.open(marker.get('map'), marker);
  });
      <?php 
    } 
?>
 
<?php
 
while($e=$req2->fetch(PDO::FETCH_OBJ)) 
    {
      ?>
      var position = new google.maps.LatLng(<?php echo $e->lat;?>, <?php echo $e->lng;?>);
      var marker = new google.maps.Marker({position: position,map: map,icon: "http://grafikart2.fsfrancesimulateur2.fr/include/membre/map/inair/<?php echo $e->heading;?>.png"});
      var infowindow = new google.maps.InfoWindow({content: 'lat: <?php echo $e->lat;?> lng:<?php echo $e->lng;?>'});
 
      google.maps.event.addListener(marker, 'click', function() {infowindow.open(marker.get('map'), marker);
  });
      <?php 
    } 
?>
 
}
google.maps.event.addDomListener(window, 'load', initialize);
 
 
 
 
 
 
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

et voici le le code modifié d’après la discussion, mais qui ne fonctionne pas, en plus y a une erreur dessus qui fait que celà ne s'affiche plus

Code:

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
127
128
129
130
131
132
133
134
135
136
137
<?php
  define('PROTECTIONINCLUDE', TRUE);
include './config/bdall.php';
 
          $DBPDO = new PDO($dbdns1,$dbuser1 , $dbpass1,
                  array( PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
          $DBPDO-> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Déplacement d'un Marker</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding : 0;
  font-family : Verdana, Arial;
  font-size : 1em;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
#page {
  padding : 0.5em;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_carte{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
  border : 1px solid #c0c0c0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tPosition = [
  { 'lat' :45.767299, 'lon' : 4.834329},
  { 'lat' :48.856667, 'lon' : 2.350987},
  { 'lat' :44.837368, 'lon' :-0.576144},
  { 'lat' :43.297612, 'lon' : 5.381042}
];
 
var nbPoint = tPosition.length;
var iPos = 0;
 
function movePositionMarker( marker){
  iPos++;            // incrémentation;
  iPos %= nbPoint;   // pas de débordement
 
 
 
 
      // déplace le marker
      marker.setPosition( 
 <?php
 
 
  
 
          $sql = "SELECT * FROM tracker_mil_acarsdata";
          $req = $DBPDO ->query($sql);
 
  ?>
            <?php
 
while($d=$req->fetch(PDO::FETCH_OBJ)) 
    {
      ?>
 
        new google.maps.LatLng( <?php echo $d->lat;?>, <?php echo $d->lng;?>),
 
      <?php 
    } 
      ?>
 
        )};
      //var position = new google.maps.LatLng(<?php echo $d->lat;?>, <?php echo $d->lng;?>);
      //var marker = new google.maps.Marker({position: position,map: map,icon: "http://grafikart2.fsfrancesimulateur2.fr/tools/.bouton.png"});
 
  // déplace le marker
  //marker.setPosition( new google.maps.LatLng( tPosition[iPos].lat, tPosition[iPos].lon));
 
  // rappel de la fonction
  setTimeout( function(){
      movePositionMarker( marker);
    }, 1000);
}
 
function initCarte(){
  // init
  var oMap, oMarker;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  false,
    streetViewControl : false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    zoom : 6,
    center : new google.maps.LatLng( 46.80, 1.75),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // creation de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"), mapOptions);
  // creation du marqueur
  oMarker = new google.maps.Marker({
    position : new google.maps.LatLng( tPosition[0].lat, tPosition[0].lon),
    map : oMap,
    icon: "http://grafikart2.fsfrancesimulateur2.fr/tools/.bouton.png"
  });
  movePositionMarker( oMarker);
}
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="div_main">
    <h1>[Google Maps API V3] Déplacement d'un Marker</h1>
    <div id="div_carte"></div>
  </div>
</div>
</body>
</html>

pourriez vous me guider s'il vous plait.

Merci d'avance Flo