Discussion :

[rollaurel]

Bonjour,

Je souhaite réinitialiser les marqueurs affichés sur ma carte lorsque j'actionne un événement Jquery qui appelle ma base de donnée.

Je souhaiterais que les marqueurs affichés sur ma carte disparaissent et que les nouveaux apparaissent. Or je n'arrive à rien, j'ai tenté de les supprimer avec la technique setMap et setOptions, ca fonctionne mais impossible de faire apparaitre les nouveaux. Je recherche la bonne technique sur internet mais je m'en sors pas. Quelqu'un pourrait-il me donner un coup de main?

Voici mon code actuel sans tentative de réinitialisation:

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
('.day').click(function(){
var date=$('#date').val();
$.post(
    'connexion.php', // Mon fichier cible côté serveur.
	'date=' + date, 
	function (data){
		var it=data.lat;
 
	        for(var i=0,I=it.length;i<I; i++){ 
		   var markers=[[data.dj[i],data.lat[i],data.lng[i]],]; // Récupération des données sélectionnées en fonction de ma date
 
		   addmarker(markers[i]); // Affichage des marqueurs
	        }
 
		function addmarker(latlng){
			var lat=data.lat[i];
			var lng=data.lng[i];
			marker = new google.maps.Marker({
			  position: new google.maps.LatLng(lat,lng),
			  map: map,
			});
 
		}
 
	},
	'json'
	);
});
}

[NoSmoking]

Bonjour,
je ne vois pas de gestion des markers...par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var tabMarkers = []; // pour stockage des marqueurs crées
/*
*  désaffecte et supprime les marqueurs
*/
function clearMarkers(){
  var i, nb = tabMarkers.length;
  for( i=0; i < nb; i++){
    tabMarkers[i].setMap(null);
  }
  tabMarkers = [];
}

il te suffit ensuite de "clearer" les marqueurs avant la création de nouveaux, cela pourrait donner

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
clearMarkers();
for (var i = 0, I = it.length; i < I; i++) {
  var markers = [ [data.dj[i], data.lat[i], data.lng[i]], ]; // Récupération des données sélectionnées en fonction de ma date
  addmarker(markers[i]); // Affichage des marqueurs
}
 
function addmarker(latlng) {
  var lat = data.lat[i];
  var lng = data.lng[i];
  var oMarker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
  });
  tabMarkers.push( oMarker);
 
}

PS: j'ai un peu de mal à comprendre la boucle

[rollaurel]

J'essaye de faire une gestion de marqueurs comme tu me l'as conseillé. Je fais un "clear" sur eux, mais je n'arrive à rien. J'ai le même problème lorsque je clique les anciens marqueurs ne s'effacent pas.

Pour ce qui est de la boucle elle me sert à inscrire mes données dans mon tableau markers=[], de façon ordonnée.

Mon code a probablement de quoi être amélioré. J'ai du mal à tout comprendre, je tourne en rond car j'ai l'impression que ce code serait censé fonctionner.

Voici où j'en suis (pas beaucoup plus loin):

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
 
$('.day').click(function(){
 
    var date=$('#date').val();
    $('#resultat').html(date);
 
    var markers=[];
    function clearMarkers(){
        var i, nb = markers.length;
        for( i=0; i < nb; i++){
             markers[i].setMap(null);
        }
     markers = [];
     }
 
clearMarkers();
 
$.post(
    'connexion.php', // Mon fichier cible côté serveur.
	'date=' + date, 
	function (data){
 
	    var it=data.lat; //variable me permettant de récupérer la longueur max de mon indentation
 
	    for(var i=0,I=it.length;i<I; i++){ 
		 markers=[[data.dj[i],data.lat[i],data.lng[i]],]; // Récupération des données Json en tableau ordonné
 
		     addmarker(markers[i]);		  // Affichage des marqueurs
	        }
 
		function addmarker(latlng){
			var lat=data.lat[i];
			var lng=data.lng[i];
			var marker = new google.maps.Marker({
			  position: new google.maps.LatLng(lat,lng),
			  map: map,
			});
			markers.push(marker);  //(je ne comprend pas l'action de ".push")
 
   		        var infowindow = new google.maps.InfoWindow();
 
                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
		            map.setZoom(8);
		            map.setCenter(marker.getPosition());
                            infowindow.setContent(data.dj[i]);
                            infowindow.open(map, marker);
                           }
                        })(marker, i));
 
	       }
 
	   },
	'json'
	);
});

[NoSmoking]

Ton appel à clearMarker est mal positionné dans ton code il doit l'être avant création des nouveaux marqueurs.

Code :

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

1
2
3
4
5
6
  $.post('connexion.php', // Mon fichier cible côté serveur.
  'date=' + date, function (data) {
    // on clear avant la création de nouveaux
    clearMarkers();
 
    var it = data.lat; //variable me permettant de récupérer la longueur max de mon indentation

Attention aux noms des variables, tu as 2 fois markers.

[rollaurel]

J'ai bien pris en compte ce que tu m'as dis, j'ai placé la fonction "clear" juste avant la création des marqueurs et j'ai modifié la variable markers en tabMarkers. Seulement ca ne fonctionne toujours pas, les marqueurs précédent s'affichent toujours.

Ci-joint mon code après les modifications:

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
 
$('.day').click(function(){
 
    var date=$('#date').val();
    $('#resultat').html(date);
 
    var tabMarkers=[];
    function clearMarkers(){
        var i, nb = tabMarkers.length;
        for( i=0; i < nb; i++){
             tabMarkers[i].setMap(null);
        }
     tabMarkers = [];
     }
 
 
$.post(
    'connexion.php', // Mon fichier cible côté serveur.
	'date=' + date, 
	function (data){
 
            clearMarkers();
 
	    var it=data.lat; //variable me permettant de récupérer la longueur max de mon indentation
 
	    for(var i=0,I=it.length;i<I; i++){  
		     addmarker();		  // Affichage des marqueurs
	        }
 
		function addmarker(latlng){
			var lat=data.lat[i];
			var lng=data.lng[i];
			var marker = new google.maps.Marker({
			  position: new google.maps.LatLng(lat,lng),
			  map: map,
			});
			tabMarkers.push(marker); 
 
   		        var infowindow = new google.maps.InfoWindow();
 
                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
		            map.setZoom(8);
		            map.setCenter(marker.getPosition());
                            infowindow.setContent(data.dj[i]);
                            infowindow.open(map, marker);
                           }
                        })(marker, i));
 
	       }
 
	   },
	'json'
	);
});

PS: j'ai aussi supprimé "var markers=[[data.dj[i],data.lat[i],data.lng[i]],];" qui ne servait en effet à rien.

[NoSmoking]

Seulement ca ne fonctionne toujours pas, les marqueurs précédent s'affichent toujours.

une chose nous manque quand même est que tu sauvegardes les marqueurs lors de leur première création, on n'a pas cette partie du code.

A chaque création il te faut faire un tabMarkers.push(marker);.

Par curiosité, pourrais tu nous donner un exemple de ce que retourne ton POST comme données, function (data){, objet JSON certes mais contenant quoi?
J'ai du mal à coprendre ce bout de code

Code :

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

1
2
3
4
5
var it=data.lat; //variable me permettant de récupérer la longueur max de mon indentation
 
    for(var i=0,I=it.length;i<I; i++){
	     addmarker();		  // Affichage des marqueurs
     }