L'infobulle n'affiche pas le bon message

**xdeslandes** · 12/02/2013, 17h14

Bonjour,
L'infobulle n'affiche pas le bon message lorsque l'on survol le marqueur, malheureusement la FAQ ne le résout pas mon problème !

Voilà mon code:

Un tableau 'adresses' est généré via une extraction (PHP), et juste après, la fonction initialiser()

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
<script type="text/javascript">
var adresses = [
'ZI le Poulin, 79250 Nueil les Aubiers',
'Le Moulin Brunet, 85390 Cheffois',
'Bellevue, 85120 St Pierre du Chemin',
'Les Rimbretières, 79140 Cirière',
'La Benetière, 85120  St Pierre du Chemin',
'La Guerre, 85120 La Tardière',
'La Haute Luque, 79380 St Marsault',
'Le Bois Richard, 79300 Clazay'
];
</script>
 
<script type="text/javascript">
	var carte;
	function initialiser() {
		var latlng = new google.maps.LatLng(46.779231, -1);
		//objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
		//de définir des options d'affichage de notre carte
		var options = {
			center: latlng,
			zoom: 10,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
 
		carte = new google.maps.Map(document.getElementById("carte_tournee"), options);
		var geocoder = new google.maps.Geocoder();
 
		var redStar = {
		  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
		  fillColor: "#F00", // rouge
		  fillOpacity: 0.8,
		  scale: 0.08,
		  strokeColor: "#F90", // orange
		  strokeWeight: 1
		};
 
		var greenStar = {
		  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
		  fillColor: "#0F0", // vert
		  fillOpacity: 0.8,
		  scale: 0.08,
		  strokeColor: "#090", // vert foncé
		  strokeWeight: 1
		};
 
		// on affiche les marqueurs
		for (i=0 ; i<adresses.length ; i++)
		{
			var adresse = adresses[i];
			geocoder.geocode( { 'address': adresse}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK)
				{
					//carte.setCenter(results[0].geometry.location);
					var marqueur = new google.maps.Marker({
						'numero'	: i,
						'position'	: results[0].geometry.location,
						'map'		: carte,
						'flat'		: true,
						'icon'		: greenStar,
						'title'		: adresse
					});
 
					var infoFenetre = new google.maps.InfoWindow();
					google.maps.event.addListener( marqueur, 'mouseover', function() {
						infoFenetre.setContent('<span style="color: #000;">' + this.title + '</span>');
						infoFenetre.open( this.getMap(), this);
					});
					google.maps.event.addListener( marqueur, 'mouseout', function() {
						infoFenetre.close( this.getMap(), this);
					});
					//setEventMarker( marqueur, infoFenetre, adresses[2]);
				}
			});
 
		}
 
	} // fin fonction initialiser()
 
 
	$(document).ready(function () {
		$('#contenus').css('width', '100%');
		initialiser();
	});
</script>

(il y a un bout de jQuery pour déclencher...)

J'ai essayé les 3 manières de l FAQ, mais rien n'y fait: les infobulles affichent la dernière adresse ! Aaaargh !

**NoSmoking** · 13/02/2013, 19h04

Bonjour,
le problème est bien traité dans la faq mais avec un niveau de profondeur supplémentaire, à savoir l'appel au géodécodage dont on sait quand il part mais pas quand il revient, la valeur du i aura donc surement évolué entre temps.

Dans ton cas il te faut créer une "bulle" dans la quelle tu coincerais ton i, en fait faire une closure.

Tu peux faire appel à une fonction à laquelle tu passerais l'adresse ET le commentaire, méthode #2 dans la faq Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?, dans cette fonction tu n'auras plus de référence au i.

**xdeslandes** · 14/02/2013, 22h47

Merci pour ta réponse.
Tu dis:

Tu peux faire appel à une fonction à laquelle tu passerais l'adresse ET le commentaire, méthode #2 dans la faq Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?, dans cette fonction tu n'auras plus de référence au i.

J'ai déjà essayé: le problème est qu'au moment ou l'événement se déclenche, i est à la fin de la boucle (=8 dans mon exemple) car l'appel à cette fonction se fait une fois la géoloc réalisée (quand on créé le marqueur).

Je ne comprends peut-être pas bien ce que tu entends par "adresse ET commentaire" ? Je souhaite afficher adresses[i] dans le marqueur i. Or c'est toujours adresses[8] qui s'affiche dans tous les infowindow après un survol de n'importe quel marqueur. Snif.

Quel est le principe d'une 'closure' ?

**NoSmoking** · 16/02/2013, 08h21

J'ai déjà essayé: le problème est qu'au moment ou l'événement se déclenche, i est à la fin de la boucle

tu n'as pas dû essayer de la bonne façon.
l'idée est d'avoir une boule comme ceci

Code :

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

1
2
3
  for (i = 0; i < adresses.length; i++) {
    setMarker(adresses[i]);
  }

dans la fonction setMarker le paramètre est passé par valeur et non par adresse (pointer), ce qui fait que dans la fonction on ne dépend pas de i.

Il te suffit de reprendre dans cette fonction ce que tu as mis dans ta boucle et le tour est joué.

Au final tu pourrais te retrouver avec un code de ce type

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
function initialiser(){
  var carte;
 
  var adresses = [
    'ZI le Poulin, 79250 Nueil les Aubiers',
    'Le Moulin Brunet, 85390 Cheffois',
    'Bellevue, 85120 St Pierre du Chemin',
    'Les Rimbretières, 79140 Cirière',
    'La Benetière, 85120  St Pierre du Chemin',
    'La Guerre, 85120 La Tardière',
    'La Haute Luque, 79380 St Marsault',
    'Le Bois Richard, 79300 Clazay'
    ];
 
  var redStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: "#F00",
    // rouge
    fillOpacity: 0.8,
    scale: 0.08,
    strokeColor: "#F90",
    // orange
    strokeWeight: 1
  };
 
  var greenStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: "#0F0",
    // vert
    fillOpacity: 0.8,
    scale: 0.08,
    strokeColor: "#090",
    // vert foncé
    strokeWeight: 1
  };
 
  function setMarker(data) {
    var adresse = data;
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': adresse
    }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //carte.setCenter(results[0].geometry.location);
        var marqueur = new google.maps.Marker({
          'position': results[0].geometry.location,
          'map': carte,
          'flat': true,
          'icon': greenStar,
          'title': adresse
        });
 
        var infoFenetre = new google.maps.InfoWindow();
        google.maps.event.addListener(marqueur, 'mouseover', function () {
          infoFenetre.setContent('<span style="color: #000;">' + this.title + '</span>');
          infoFenetre.open(this.getMap(), this);
        });
        google.maps.event.addListener(marqueur, 'mouseout', function () {
          infoFenetre.close();
        });
      }
    });
  }
 
  var latlng = new google.maps.LatLng(46.779231, -1);
  //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
  //de définir des options d'affichage de notre carte
  var options = {
    center: latlng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  carte = new google.maps.Map(document.getElementById("carte_tournee"), options);
  // on affiche les marqueurs
  for (i = 0; i < adresses.length; i++) {
    setMarker(adresses[i]);
  }
} // fin fonction initialiser()
google.maps.event.addDomListener(window, 'load', initialiser);

**xdeslandes** · 16/02/2013, 14h50

Effectivement, cela fonctionne. Un grand merci à toi.
Mais, tout de même deux questions:

1- cette déclaration de la fonction setMarker dans la fonction initialiser(), c'est propre, ça ? Dans une classe, oui, mais là ?

2- Est-ce justement le fait de déclarer cette fonction à l'intérieur qui fait marcher ton idée ?

**NoSmoking** · 16/02/2013, 18h37

réponse #2 : Non que nenni.

réponse #1 : Aucun problème c'est comme pour les variables la visibilité est dans ce cas locale.

Qu'aurais tu dit si j'avais plutôt écrit

Code :

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

1
2
3
4
5
google.maps.event.addDomListener(window, 'load', 
  function(){
     //ici tout le code contenu dans la fonction initialiser
  }
);

le résultat aurait été le "même", cela fonctionne, on aurait juste gagné un nom de fonction dans l'espace de nom.

**xdeslandes** · 16/02/2013, 20h13

Merci encore. Affaire résolue. A bientôt.

L'infobulle n'affiche pas le bon message [Google Maps]

APIs Google

Discussions similaires

Partager

Partager