Actualisation Marker api v3 Google

**Bm.serra** · 09/03/2012, 17h02

Bonjour, dans le cadre d'un projet je dois mettre en place une cartographie avec L'API Google Map V3. Je dois effectuer une localisation de techniciens en temps réel. Pour cela j'ai utilisé une carte api V3 basique avec l'ajout de "markers" tout fonctionne mais il n'y a aucune actualisation a part de recharger la page en complet. Ce que je voudrai, c'est pouvoir avoir une actualisation automatique des "markers" et simplement des "markers"'. Pour cela j'ai utilisé le code suivant mais sans succès...

Cordialement.

Code :

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
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 20px;
				padding: 20px;
			}
			#map {
				margin: 20px;
				height: 100%;
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
 
				var Lati = '49.409968' ; 
				var Lon = '6.1518' ; 	
 
 
				function initialisation(){
 
				var myLatlng = new google.maps.LatLng(Lati,Lon);
				var optionsCarte = {
					zoom: 16,
					center: myLatlng,
					mapTypeId: google.maps.MapTypeId.HYBRID
				};
				var myLatlng = new google.maps.Map(document.getElementById("map"), optionsCarte)
				pointeurs();
				var bounds = new google.maps.LatLngBounds();
 
 
			}
				function pointeur(){
 
				var tableauLieux = [
					["Serra",<?php echo $latitudeserra; ?>,<?php echo $longitudeserra; ?>],
					["Palpe",<?php echo $latitudepalpe; ?>,<?php echo $longitudepalpe; ?>]
 
				];
				for (var i = 0; i < tableauLieux.length; i++) {
				var Lieu = tableauLieux[i];
				var pointLieu = new google.maps.LatLng(Lieu[1], Lieu[2]);
				bounds.extend(pointLieu);
				var marqueurLieu = new google.maps.Marker({
					position: pointLieu,
					map: myLatlng,
					title: Lieu[0]
				});
				}
 
				myLatlng.fitBounds(bounds);
 
				}
 
			google.maps.event.addDomListener(window, 'load', initialisation)
 
		</script>
	</head>
	<body>
		<div id="map"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

**NoSmoking** · 09/03/2012, 23h02

Bonjour,
cela peut passer par une requête, type Ajax, avec une remise à jour des marqueurs en utilisant la méthode setPosition(latlng);.

**Bm.serra** · 10/03/2012, 11h55

Merci de votre réponse, je suis étudiant en BTS informatique et n'ai pas vraiment apprit le java-script /ajax ayant essentiellement fait des langages c /c++ j'ai un peu de mal avec la structure JavaScript si vous pouviez me donner un exemple cela pourrais surement m'aider a comprendre votre propositions..

Cordialement.

**NoSmoking** · 11/03/2012, 19h30

Après chargement de la page, il suffit de lancer une requête au serveur, avec la techno Ajax, pleins d'info sur Ajax, et à réception des infos il suffit de mettre à jour les positions des marqueurs.

Si la base de données coté serveur à évoluée, pour un individu donné, les modifications seront prises en compte.

Cet appel devra être renouvelé après un certains temps, c'est à toi de l'estimer ce temps, via la méthode setTimeout ou setInterval.

Au départ il te faut donc bien définir les structures que tu veux mettre en oeuvre afin de faire coller ton code javascript en conséquence.

Un dernier lien, commence peut être par celui là, http://www.developpez.net/forums/d11...onnees-moment/

**Bm.serra** · 12/03/2012, 20h37

Merci de ta réponse, j'ai travaillé dessus toute la journée en essayant entre autres les méthodes de "inter vals" mais je n'arrive toujours pas a actualiser seulement les "marker" tout en gardant ma carte fixe sur l’arrière plan...

**NoSmoking** · 13/03/2012, 22h17

Envoyé par Bm.serra

...mais je n'arrive toujours pas a actualiser seulement les "marker" tout en gardant ma carte fixe sur l’arrière plan...

il serait bon que tu précises ce que tu entends par garder fixe, cela est-il suite au rechargement complet de la page ou simplement un déplacement de la carte.

**Bm.serra** · 14/03/2012, 22h55

En faite, j'aimerai simplement que mes marker se déplacent sans que la carte soit rafraichit. J'ai pour le moment une méthode qui me permet de réactualiser ma page mais cela faire disparaitre la carte pendant quelques secondes ce qui ne permet pas vraiment un contrôle du déplacement mais un simple positionnement. J'avais fini par croire que cela n’étais pas possible avec L'API Google mais j'ai toujours un exemple de cette mise en place sur un site que je peux éventuellement joindre pour une meilleure explications de ce que j'aimerais réussir a mettre en place.

En tout cas merci de votre aide !!

**NoSmoking** · 15/03/2012, 22h07

En faite, j'aimerai simplement que mes marker se déplacent sans que la carte soit rafraichit

La solution passe bien par un appel Ajax, voir liens fournis plus avant.

Une fois la carte afficher, il te faut faire appel à une fonction qui va intérroger le serveur
- le serveur va te renvoyer les nouvelles coordonnées, ce sera une chaine de caractères.
- au retour tu décodes la chaine reçue et tu mets à jour la position, il te faut ensuite relancer la fonction.

j'ai l'impression de l'avoir déjà écrit

une démonstration de ce que cela peut donner

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
<!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( 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
  });
  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>

dans l'exemple tout ce passe dans la fonction movePositionMarker.

C'est cette fonction que tu dois aménager pour émettre ta requête et recevoir son retour.

**hiba29** · 12/06/2012, 10h59

Bonjour ;

je suis en train de créer une application de suivi (géolocalisation par gps ) j'ai utilisé ce code de NoSmoking pour le déplacent des marker sans que la carte soit rafraîchit , mais il me faut maintenant les relier par des polylignes, pour voir le traçage sans rafraichir la page aussi (exp http://www.instamapper.com/fe?page=demo )

J'espère que vous arriverez à m'aider.
En vous remerciant par avance.

**NoSmoking** · 14/06/2012, 19h21

Bonjour hiba29 et bienvenue sur DVP,

à chaque déplacement d'un marqueur tu ajoutes sa position à la polyline qui si elle est liée à la Map l'affichage se mettra à jour.

**hiba29** · 18/06/2012, 10h20

Bonjour ;

Merci de votre réponse.
Voilà le code que j'ai essayé :

Code :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
<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">
 
#div_carte{
 
  width : 1080px;
  height: 720px;
 
}  { 'lat' :43.297612, 'lon' : 5.381042},
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tPosition = [
<?php
include('../../connect_base.php');
$requete="select * from traceper_user_was_here where userId=50 ORDER BY Id DESC";
$resultat=mysql_query($requete) or die(mysql_error());
while ($row=mysql_fetch_array($resultat))
{
?>
  { 'lat' :<?php echo $row["latitude"]; ?>, 'lon' :<?php  echo $row["longitude"]; ?>},
<?php
}
?>
 
];
 
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( 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 : 7,
    center : new google.maps.LatLng( 35.33332,09.909424),
    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
  });
  movePositionMarker( oMarker);
 
 
// TRACAGE PARCOURS CODE EN DUR AVEC FONCTION GOOGLE MAPS POLYLINE()
// LES COORDONNÃ‰ES LAT/LON DOIVENT SE TROUVER DANS UN TABLEAU JAVASCRIPT
// LE DERNIER ELEMENT DU TABLEAU N'EST PAS SUIVI D'UNE VIRGULE !
 
 var tableauPointsPolyline = [
<?php
 
$requete2="select * from traceper_user_was_here where userId=50 ORDER BY Id DESC";
$resultat2=mysql_query($requete2) or die(mysql_error());
while ($row2=mysql_fetch_array($resultat2))
{
?>
new google.maps.LatLng(<?php echo $row2["latitude"]; ?>,<?php  echo $row2["longitude"]; ?>),
<?php
}
?>
 ];
 
 
 
 var optionsPolyline = {
                                        map: oMap,
                                        path: tableauPointsPolyline
                                };
 
// TRACAGE DE LA POLYLIGNE
                                var maPolyline = new google.maps.Polyline(optionsPolyline);
 
 
 
 
 
}
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body onload="initCarte()">
<?php
 
$b=$_GET["id"];
echo $b;
 
?>
    <div id="div_carte"></div>
</body>
</html>

Mais il fait le traçage directement sans suivre le déplacement du marqueur.

.
merci d'avance.

**NoSmoking** · 20/06/2012, 20h57

Il ne te faut pas mettre tous les points dans la polyline tout de suite, il te faut...

Envoyé par NoSmoking

à chaque déplacement d'un marqueur tu ajoutes sa position à la polyline qui si elle est liée à la Map l'affichage se mettra à jour.

**hiba29** · 21/06/2012, 10h29

bonjour

j'ai essayé mais je ne sais pas comment déclarer la fonction path , pour faire le traçage avec le déplacement de marqueur ..
Est ce que vous pouvez me donner un exemple de code svp

**NoSmoking** · 22/06/2012, 14h34

Au vu du code quelques remarques

ligne #20 on trouve } { 'lat' :43.297612, 'lon' : 5.381042},, mais qu'est ce?

ligne #83 on trouve var tableauPointsPolyline = [, mais pourquoi reprendre les valeurs déjà récupérées en ligne #24 dans var tPosition = [.

D'une manière générale il est intéressant de regarder le code généré, CTRL +U, sur la plupart des navigateurs.

Maintenant concernant la logique

il faut créer un objet polyline VIDE, attaché à la carte

Code :

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

1
2
3
4
// creation de la polyline
var oPolyline = new google.maps.Polyline({
    'map': oMap
  });

ensuite lorsque l'on déplace le marqueur, et à ce moment là seulement, on ajoute le point à la polyline, cela ce passe donc dans la fonction movePositionMarker.

On va passer la référence à l'objet polyline en paramètre à la fonction

Code :

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

function movePositionMarker( marker, trajet){

on va déplacer le marqueur et ajouter le point à la polyline en utilisant la méthode getPath(), qui récupére l'emplacement des datas latLng, puis push(), méthode des Array, pour le stockage en fin de datas.

Code :

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

1
2
3
4
5
6
  // recup. du point a traiter
  var point = new google.maps.LatLng( tPosition[iPos].lat, tPosition[iPos].lon);
  // deplace le marker
  marker.setPosition( point);
  // ajout point dans polyline
  trajet.getPath().push( point);

on note que le fait d'ajouter un point à la polyline affiche sur la carte le segment généré par celui ci, on n'a donc rien d'autre à faire.

**hiba29** · 26/06/2012, 13h16

merci beaucoup

tout marche bien.Maintenant, je veux après chaque déplacement de marqueur1,un autre marqueur2 apparait sur le point déjà passé par marqueur1,pour que je puisse en cliquant sur le marqueur2 afficher un popup de données.(voir exemple)

Code :

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
 
<?php
include('connect_base.php');
$requete="select * from traceper_user_was_here where userId=50 AND speed!=0 ORDER BY Id DESC";
$resultat=mysql_query($requete) or die(mysql_error());
while ($row=mysql_fetch_array($resultat))
{
?>
var point = new google.maps.LatLng
(<?php echo $row["latitude"]; ?>,<?php  echo $row["longitude"]; ?>)
 
var marker = new google.maps.Marker({
        position: point,
        icon: "icon2.gif",
        map: map
    });  
// fin de la construction des marker
 
// Encore quelques fonctions google maps pour ajouter un infobulle lors d'un clic sur un marqueur
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
  content: '',
  size: new google.maps.Size(50,50),
position:point
});
  //infowindow.open(map, marker);
  infowindow.open(map, this);
 
 infowindow.setContent( 'latitude : '+<?php echo $row["latitude"]; ?>+'<br/> longitude :'+<?php  echo $row["longitude"]; ?>);
});
<?php
}
?>

Merci encore

**NoSmoking** · 26/06/2012, 19h17

Merci d'ouvrir une autre discussion, on s'éloigne de la discussion d'origine

Poser une nouvelle question dans une discussion déjà ouverte par un autre membre risque d'embrouiller les personnes qui lisent cette discussion et de vous priver d'une éventuelle réponse. Cela nuit également à la lisibilité et à l'organisation du forum.

**hiba29** · 28/06/2012, 17h19

ok , merci pour votre aide et je vais ouvrir nouvelle discussion.

**mreiwa** · 12/07/2012, 16h36

merciiii hiba pour la solution

**targani** · 24/07/2012, 14h02

Salut tous le monde.
premièrement je veut vous remerciez pour ce que vous avez présenter avant

, et j'espère que vous pouvez m'aider sur mon problème

.
en faite je veut juste faire à coté de ma carte, que j'ai déjà afficher, faire apparaître une interface qui va contenir une zone de texte et deux boutons, l'un pour l'ajout et l'autre pour la suppression des marqueurs que j'ai déjà dans ma BDD0.
J'espère que vous avez bien compris ce je veut dire.

Merci encore une fois et bonne journée à tous

Actualisation Marker api v3 Google

APIs Google

Discussions similaires

Partager

Partager