Bug dans l'affichage des infowindows

**pc75** · 26/02/2015, 13h06

Bonjour,

Je génère une page avec des champs cachés qui contiennent les coordonnées de différentes adresses.
Au lancement de ma carte, chaque adresse est matérialisée par un marqueur.
Quand je clique sur un marqueur, j'affiche une vue streetview dans une infowindow.
Tout fonctionne "relativement" correctement sauf :

Si je clique sur le marqueur "PARIS NORD", ma streetview s'affiche correctement.
Ensuite, si je ferme la streetview "PARIS NORD" et que clique sur le marqueur "PARIS EST", ma streetview s'affiche correctement.
Ensuite, si je ferme la streetview "PARIS EST" et que clique à nouveau sur le marqueur "PARIS NORD", ma streetview s'affiche correctement,
MAIS, j'ai l'impression que mon code part "en boucle". De plus, le processus du navigateur monte à presque 60% dans le gestionnaire des tâches.

En résumé, si je clique sur un marqueur sur lequel j'ai déjà cliqué précédemment, le problème se produit.

Quelqu'un peut m'aider à résoudre ça, svp ?

Merci.

Le code de ma page :

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<HEAD>
 
<style type="text/css"> 
	div.conteneur-parent {
	    height: 800px;
	}
 
	#map-canvas {
		height : 730px;
		width : 1000px;
		width : 100%;
		margin: 0 auto;
		margin-right: auto;
		border : 1px solid #888;
	}
</style>
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr&v=3"> 
</script>
 
<script type="text/javascript"> 
var map;
var contentString = '<div id="content" style="width:450px;height:300px;"></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// initialisation de la carte Google Map de départ
function initialiserCarte()
{
	// Latitude et longitude du centre de Paris pour centrer la carte de départ
	var latlng = new google.maps.LatLng(48.8590519, 2.33254949999998);
	var mapOptions = {
		zoom      : 13,
		center    : latlng,
		mapTypeId : google.maps.MapTypeId.ROADMAP
		};
 
	// map-canvas est le conteneur HTML de la carte Google Map
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
	TrouverAdresse();
 
}
 
function TrouverAdresse()
{
	var nbadresses = document.getElementById('nbadresses').value;
	// Lecture du tableau des adresses
	for (var i = 1; i <= nbadresses; i++)
		{
		var nom = document.getElementById('nom' + i).value;
		var adresse = document.getElementById('adresse' + i).value;
		var latitude = document.getElementById('latitude' + i).value;
		var longitude = document.getElementById('longitude' + i).value;
 
		latitude = parseFloat(latitude);
		longitude = parseFloat(longitude);
		imgMarker = 'images/green-dot.png';
 
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(latitude, longitude),
		    map: map,
		    icon: imgMarker,
		    height: 25,
		    width: 25,
		    indice: i,
		    title: nom + '\n' + adresse.replace('<br>', ' ')
		  });
 
		setEventMarker(marker);
		}
}
 
function setEventMarker(marker){
	google.maps.event.addListener(marker, 'click', function() {
 
    // affichage InfoWindow
    infowindow.open( this.getMap(), this);
 
	var pano = null;
	google.maps.event.addListener(infowindow, 'domready', function() {
	if (pano != null) {
	pano.unbind("position");
	pano.setVisible(false);
	}
	pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
	navigationControl: true,
	navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
 
	enableCloseButton: false,
	addressControl: true,
	linksControl: true,
 
	pov: {
		heading: 0,
		pitch: 0,
		zoom: 1
		}
	});
 
	pano.bindTo("position", marker);
	pano.setVisible(true);
	});
 
	google.maps.event.addListener(infowindow, 'closeclick', function() {
	pano.unbind("position");
	pano.setVisible(false);
	pano = null;
	});
 
  });
}
 
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>
 
<title>
</title>
</HEAD>
<body bgcolor="#ECF4FF">
 
<form name="frmMap" method="post">
 
<div class="conteneur-parent">
<div id="map-canvas" class="map-canvas"></div>
</div>
 
<input type="hidden" id="adresse1" value="10 rue Ordener<br>75018 PARIS">
<input type="hidden" id="nom1" value="PARIS NORD">
<input type="hidden" id="latitude1" value="48.8903814">
<input type="hidden" id="longitude1" value="2.358542">
 
<input type="hidden" id="adresse2" value="135 rue d'Alésia<br>75014 PARIS">
<input type="hidden" id="nom2" value="PARIS SUD">
<input type="hidden" id="latitude2" value="48.8292347">
<input type="hidden" id="longitude2" value="2.3216871">
 
<input type="hidden" id="adresse3" value="28 rue de Passy<br>75016 PARIS">
<input type="hidden" id="nom3" value="PARIS OUEST">
<input type="hidden" id="latitude3" value="48.8581806">
<input type="hidden" id="longitude3" value="2.2813245">
 
<input type="hidden" id="adresse4" value="2 rue Belgrand<br>75020 PARIS">
<input type="hidden" id="nom4" value="PARIS EST">
<input type="hidden" id="latitude4" value="48.8649356">
<input type="hidden" id="longitude4" value="2.3986363">
 
<input type="hidden" name="nbadresses" id="nbadresses" value="4">
 
</form>
 
</BODY>
</HTML>

**NoSmoking** · 26/02/2015, 21h57

Bonjour,
je dirais que ton problème ce situe dans ta fonction setEventMarker et notamment ici

Code :

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

1
2
3
4
5
google.maps.event.addListener(marker, 'click', function() {
    // affichage InfoWindow
    infowindow.open( this.getMap(), this);
    var pano = null;
    google.maps.event.addListener(infowindow, 'domready', function() {

à chaque clic sur un marqueur tu rajoutes un événement, toujours le même, à ton InfoWindow unique, bilan la 1^er fois il s’exécute 1 fois, la 2^éme 2 fois, la 3^éme 3 fois et ainsi de suite.

**pc75** · 27/02/2015, 09h13

Merci,

Code :

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

1
2
3
4
5
6
7
 
google.maps.event.addListener(marker, 'click', function() {
    // affichage InfoWindow
    infowindow.open( this.getMap(), this);
    var pano = null;
    google.maps.event.addListener(infowindow, 'domready', function() {
alert("???");

Effectivement, si j'insère un "alert" dans mon code, l'alert s'affiche 1 fois au premier clic, 2 fois au deuxième clic, 3 fois au troisième clic, etc
Le gros hic, c'est si je clique sur un marqueur sur lequel j'ai déjà cliqué un fois auparavant, le code s'exécute en boucle et le processus grimpe.

Je continus de chercher, mais si quelqu'un voit une solution, je suis preneur.

Merci.

**NoSmoking** · 28/02/2015, 11h17

Après avoir regardé plus avant ton code, je n'aurais pas la même approche, ou presque, que toi.

Je commencerais par créer un StreetViewPanorama que je mettrais à jour en fonction de la demande, ce qui me semble simplifierait la gestion.

Sur base de ton code cela pourrait donner cela

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
var map,
    pano = null,
    infowindow;
 
function initialiserCarte() {
    // Latitude et longitude du centre de Paris pour centrer la carte de départ
    var latlng = new google.maps.LatLng(48.8590519, 2.33254949999998);
    var mapOptions = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    // map-canvas est le conteneur HTML de la carte Google Map
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    // création du conteneur pour le pano
    var oDest = document.createElement('DIV');
    oDest.style.height = '300px';
    oDest.style.width  = '450px';
 
    // création du pano
    pano = new google.maps.StreetViewPanorama( oDest, {
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
 
        enableCloseButton: false,
        addressControl: true,
        linksControl: true,
        position: latlng,          // pour forcer la première prise en compte
 
        pov: {
            heading: 0,
            pitch: 0,
            zoom: 1
        }
      });
    // création de l'infoWindow
    infowindow = new google.maps.InfoWindow({
        content: oDest            // passage en paramètre du noeud crée
      });
 
    TrouverAdresse();
}
 
function setEventMarker(marker) {
    google.maps.event.addListener(marker, 'click', function() {
        // init du pano
        pano.unbind("position");
        pano.setVisible(false);
        // affichage infoWindow quand positionné
        google.maps.event.addListenerOnce( pano,'position_changed', function(){
            // affichage InfoWindow
            infowindow.open( marker.getMap(), marker);
            pano.setVisible(true);
          });
        // update du pano
        pano.setPosition(this.getPosition());
        pano.bindTo( "position", this);
    });
}

pas touché à ta fonction TrouverAdresse();

**pc75** · 02/03/2015, 09h48

Merci beaucoup,

Ca fonctionne nettement mieux comma ça.

Bug dans l'affichage des infowindows [Google Maps]

APIs Google

Discussions similaires

Partager

Partager