Discussion :

[UserC]

Bonjour la communauté,,
un peu perdu dans javascript que j'utilisais pour alimenter une googlemaps avec des markers et un listing qui étaient liés. Autrement dit, une googlemap affichait des markers qui représentaient des li dans une liste adjacente.
Bref, il m'a fallu arrêter le jumelage li / markers pour des raisons de développement il y a des mois... Maintenant, j'ai besoin de rebrancher les tuyaux et évidemment, je suis complètement paumé...

Voici donc le code qui génère le tout

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
126
function initCarte(){
  var oListe, oLI,
      oMarker, oInfo, oMap, i, nb = tData.length;
  oListe = document.getElementById('liste_marker');
 
  oform =  document.getElementById('myForm');
 
  // création de la carte
  oMap = new google.maps.Map(document.getElementById('div_carte'),{
      'backgroundColor': '#FFF',
      'mapTypeControl':  false,
      'streetViewControl': false,
      'zoom': 12,
      'center': new google.maps.LatLng(47.792783,3.574800),
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListenerOnce( oMap, 'tilesloaded', function(){
      this.complete = true;
    });
  // création des marqueurs
  for( i = 0; i < nb; i++){
    // ajout d'une entrée dans la liste
    oLI = document.createElement('LI');
	if((tData[i].category == 'home') || (tData[i].category == 'home2')){
		oLI.innerHTML ='<label>'+ tData[i].titre +'</label>';
	}else{
		oLI.innerHTML ='<input type="checkbox" id="checkCM'+tData[i].myID+'" data-itemtype="myCMs" name="seclectedCM[]" value="'+tData[i].myID+'"><label>'+ tData[i].titre +'</label>';
	}
    oListe.appendChild( oLI);
 
 
    oMarker = new google.maps.Marker({
        'position' : new google.maps.LatLng( tData[i].lat, tData[i].lon),
        'map' : oMap,
        'icon': myicon,
        'title' : tData[i].titre
      });
 
    // création infobulle
	var myhtml = 
		'<div class="titletext">'+tData[i].titre+'</div>'+
		'<div class="regText">'+tData[i].address+'<br/>'+
		'<div class="regText">'+tData[i].missions+'<br/>'+
		tData[i].info+'<br/>'+
		'</div></div>';
 
    oInfo = new google.maps.InfoWindow({
        'marqueur': oMarker,
        'content' : '<div class="bulle">' +myhtml+'<\/div>'
      });
 
 
    // gestion des liaisons
    oMarker.infoBulle = oInfo;
    oMarker.liste = oLI;
    // ajout evenement sur marker
    google.maps.event.addListener( oMarker, 'click', function(){
        // récup. de l'objet carte
        var map = this.getMap();
        if( !map.complete) return;
        // change la class de la LI
        this.liste.className = 'liste_over';
        // save de l'image icone
        this.saveIcone = this.getIcon();
        // affectation icone qui va bien
        //this.setIcon( 'http://maps.google.com/mapfiles/marker_green.png');
        // affichage infoBulle
        this.infoBulle.open( map, this);
      });
    //google.maps.event.addListener( oMarker, 'mouseout', function(){
        // récup. de l'objet carte
        //var map = this.getMap();
        //if( !map.complete) return;
		//this.liste.className = '';
        //this.setIcon( this.saveIcone);
		//if (document.getElementById('trigger').value==0) {
			//this.infoBulle.setMap(null);
			//};
		//document.getElementById('trigger').value=0;
      //});
 
 
 
    google.maps.event.addListener( oMarker, 'click', function(data){
        //set up condition to prevent info from disappearing
		//alert (var mecheck = 1);
		var mecheck = 1;
		// récup. de l'objet carte
        var map = this.getMap();
        if( !map.complete) return;
 
        if( data.center){
          // recentrage de la carte
          this.getMap().panTo( this.getPosition());
        }
        if( data.zoom){
          // zoom de la carte
          this.getMap().setZoom( data.zoom);
        }
		document.getElementById('trigger').value=1;
      });
    // gestion des liaisons
    oLI.marker = oMarker;
 
    // transfert des événements sur le marker
    oLI.onmouseover= function(){
        google.maps.event.trigger( this.marker, 'mouseover', null);
      };
    oLI.onmouseout = function(){
        google.maps.event.trigger( this.marker, 'mouseout', null);
		document.getElementById('trigger').value=0;
      };
    oLI.onclick = function(){
		document.getElementById('trigger').value=1;
        google.maps.event.trigger( this.marker, 'click', {'center':true});
		this.infoBulle.open(map, this);
      };
    oLI.ondblclick = function(){
        google.maps.event.trigger( this.marker, 'click', {'zoom':13});
      };
    oLI.onselectstart = function(){
        return false;
      };
 
 
  }

A la fin de la fin et maintenant, la carte s'affiche bien avec mes entrées var Data inséré plus haut mais mes markers sont muets sur le clic malgré le "this.infoBulle.open( map, this);" et mes listings li qui s'affichent bien aussi ne font rien non plus...



please help.

[NoSmoking]

Bonjour,
tu peux dire merci à un développeur G_$$gle qui a modifier la méthodes google.maps.addEventListener sans franchement savoir ce qu'il faisait

A partir de la version 3.50, c'est du trés récent, l'instance, oMap, n'est plus disponible en tant que this dans la fonction de rappel.

Pour que cela fonctionne correctement il te faut remplacer le code, ligne 17

Code :

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

1
2
3
google.maps.event.addListenerOnce( oMap, 'tilesloaded', function(){
    this.complete = true;
  });

par

Code :

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

1
2
3
4
5
google.maps.event.addListenerOnce( oMap, 'tilesloaded', function(){
    // marche jusqu'à version 3.49  où this vaut l'instance oMap
    // this.complete = true;
    oMap.complete = true;
  });

[NoSmoking]

Le bug a était signalé, pris en compte et traité.

La correction est effective depuis la version 3.5.12a de l'API en souhaitant que cela soit pérenne !

• issues tracker : google.maps.event.addEventListenerOnce