Impossible de stopper la propagation dans JQuery tabs

**informer** · 24/02/2016, 09h46

Bonjour à tous,

Mon problème est le suivant, je n'arrive pas à stopper la propagation quand je clique sur l'onglet d'une infoWindow d'un marker d'une Google Maps, Google Maps elle même insérée dans JQuery quand la page de l'onglet JQuery tab n'est pas la 1ere page....C'est toujours un exercice roboratif que de décrire le monde objet..

J'ai donc mis en ligne un exemple qui pour être testé on peut cliquer ici: GMaps_NOk_Propagation tab->mark->streetView .

Pour pouvoir comparer le comportement entre les 2 pages de l'onglet de la forme, j'ai dupliqué le code qui gère la Google Maps dans chacun des onglets. Le code est donc identique mais le comportement complétement différent

.

Si on clique sur

Le 1er onglet, GMaps_Ok, aucun problème => Pas de propagation.
Le 2ème onglet GMaps_NOk_Propagation tab => NOk => Propagation
- =>appel de $(document).ready(function() initialisé dans index.js
- => $("#jQueryTabs1").on('tabsactivate', function(event, ui)
- => $("#jQueryTabs1").tabs('option', 'active');
- => réinitialise la carte à chaque fois que je clique sur l'onglet StreetView de l'infoWindow

Le code HTML est réduit à un onglet (2 pages) et 2 Div dans lesquels sont affichés les Google Maps:

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 11 - http://www.wysiwygwebbuilder.com">
<link href="css/cupertino/jquery-ui.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.ui.core.min.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.mouse.min.js"></script>
<script src="js/jquery.ui.sortable.min.js"></script>
<script src="js/jquery.ui.tabs.min.js"></script>
 
 
<link href="css/gmaps.css" rel="stylesheet">
 
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src="js/gmaps.js"></script>
 
</head>
<body onload="initMaps2();return false;">
<div id="wb_Form1" style="position:absolute;left:12px;top:2px;width:1213px;height:807px;z-index:5;">
<form name="Form1" method="post" action="mailto:yourname@yourdomain.com" enctype="text/plain" id="Form1">
<div id="jQueryTabs1" style="position:absolute;left:8px;top:7px;width:1187px;height:783px;z-index:2;">
<ul>
<li><a href="#jquerytabs1-page-0"><span>GMaps_Ok</span></a></li>
<li><a href="#jquerytabs1-page-1"><span>GMaps_NOk_Propagation</span></a></li>
</ul>
<div style="height:743px;overflow:auto;padding:0;" id="jquerytabs1-page-0">
<div id="Layer2" style="position:absolute;text-align:left;left:15px;top:55px;width:1164px;height:722px;z-index:0;">
</div>
</div>
<div style="height:743px;overflow:auto;padding:0;" id="jquerytabs1-page-1">
<div id="Layer1" style="position:absolute;text-align:left;left:11px;top:58px;width:1164px;height:718px;z-index:1;">
</div>
</div>
</div>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>

Une fichier index.js dont le code pour l'affichage de la Google Maps dans l'onglet GMaps_NOk_Propagation est une RÉPLICATION du code pour l'onglet GMaps_Ok :

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
$(document).ready(function()
{
   var jQueryTabs1Options =
   {
      show: false,
      event: 'click',
      collapsible: false
   };
   $("#jQueryTabs1").tabs(jQueryTabs1Options);
   $("#jQueryTabs1").on('tabsactivate', function(event, ui)
   {
      var index = $("#jQueryTabs1").tabs('option', 'active');
      switch(index)
      {
         case 1:
            initMaps();
            break;
      }
   });
});

Et enfin un fichier gmaps.js qui construit les Google Maps et dont le code pour l'affichage de la Google Maps dans l'onglet GMaps_NOk_Propagation est une RÉPLICATION du code pour l'onglet GMaps_Ok ::

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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
var arrMarkers = [{
		'locNr': "Location 1",
		'lat': 45.767299,
		'lon': 4.834329,
		'city': 'Lyon',
		'zip': 69,
		'land': "Fance",
		'info': '<b>Lyon<\/b><br>la suite du texte...'
	},
	{	'locNr': "Location 2",
		'lat': 48.856667,
		'lon': 2.350987,
		'city': 'Paris',
		'zip': 75,
		'land': "Fance",
		'info': '<b>Paris<\/b><br>la suite du texte...'
	},
	{	'locNr': "Location 3",
		'lat': 44.837368,
		'lon': -0.576144,
		'city': 'Bordeaux',
		'zip': 33,
		'land': "Fance",
		'info': '<b>Bordeaux<\/b><br>la suite du texte...'
	},
	{	'locNr': "Location 4",
		'lat': 43.297612,
		'lon': 5.381042,
		'city': 'Marseille',
		'zip': 13,
		'land': "Fance",
		'info': '<b>Marseille<\/b><br>la suite du texte...'
	}];
 
var oMap = {
	map: null,
	markers: []
};
 
 
function initMaps(layerNbr) 
{	if (document.getElementById)
	{	var mapDiv = document.getElementById('Layer1');
		var latlng = new google.maps.LatLng(46.316584,2.98169);
		var options = 
		{	zoom: 6,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP, // Existe d'autre format Ex: HYBRID => Plan sur photo
			scalecontrol: true,
			navigationControl: true,
			maxZoom : 20,
			navigationControlOptions:
			{	style: google.maps.NavigationControlStyle.SMALL
			},
			mapTypeControlOptions:
			{	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			},
			streetViewControl: true
		};	
    };
	oMap.map = new google.maps.Map(mapDiv, options);
	addMarker();
}
 
function addMarker(){
	if (oMap.map){
		//var latlng = new google.maps.LatLng(lat,lng);
		for (var i in arrMarkers) {
			var lat = arrMarkers[i].lat;
			var lng = arrMarkers[i].lon;
			var locNr = arrMarkers[i].locNr;
			var city = arrMarkers[i].city;
			var zip = arrMarkers[i].zip;
			var land = arrMarkers[i].land;
			var info = arrMarkers[i].info;
			var latlngset = new google.maps.LatLng(lat, lng);
			var markOpt = {
				map: oMap.map,
				position: latlngset,
				title: city
			};
			var marker = new google.maps.Marker(markOpt);
			oMap.markers.push(marker);
 
			var contentInfoWindow = [
				'<div id="InfoText">',
					'<div class ="tabs">',
						'<ul>',
							'<li><a href="#tab1">General</a></li>',
							'<li><a href="#tab2" id="SV">Street View</a></li>',
						'</ul>',
						'<div id="tab1">', 
							'<h3><b>' + locNr + '</h3></b>', '<p>' + city + '<BR>' + land + '<BR>' + zip + '<BR>' + info + '</p>',
						'</div>',
						'<div id="tab2">',
							'<div id="pano"></div>',
						'</div>', 
					'</div>',	
				'</div>'		
				].join('');
			var infoWindowOptions = {
				content: contentInfoWindow,
				position: latlngset
			};
			var infowindow = new google.maps.InfoWindow(infoWindowOptions);
			setEventMarker(marker, infowindow);
		};
		adjustViewPort()
	};
}
function setEventMarker(marker, infowindow) {
    google.maps.event.addListener(marker, "click", function () {
        infowindow.open(this.getMap(), this);
    });
 
    google.maps.event.addListener(infowindow, 'domready', function () {
        $(".tabs").tabs();
        $('#SV').click(function (e) {
            e.stopPropagation();
			var panoramaOptions = {
				position: marker.position
			};
			var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
			//oMap.map.setStreetView(panorama);
        });
    });
};
 
 
adjustViewPort = function() {
	if (oMap.map) {
		var bounds = new google.maps.LatLngBounds();
		for (var i in oMap.markers) {
			bounds.extend(oMap.markers[i].getPosition());
		}
		oMap.map.fitBounds(bounds);
}}
 
/*----------------------------2 */
var oMap2 = {
	map: null,
	markers: []
};
 
function initMaps2() 
{	if (document.getElementById)
	{	var mapDiv2 = document.getElementById('Layer2');
		var latlng = new google.maps.LatLng(46.316584,2.98169);
		var options = 
		{	zoom: 6,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP, // Existe d'autre format Ex: HYBRID => Plan sur photo
			scalecontrol: true,
			navigationControl: true,
			maxZoom : 20,
			navigationControlOptions:
			{	style: google.maps.NavigationControlStyle.SMALL
			},
			mapTypeControlOptions:
			{	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			},
			streetViewControl: true
		};	
    };
	oMap2.map = new google.maps.Map(mapDiv2, options);
	addMarker2();
}
 
function addMarker2(){
	if (oMap2.map){
		//var latlng = new google.maps.LatLng(lat,lng);
		for (var i in arrMarkers) {
			var lat = arrMarkers[i].lat;
			var lng = arrMarkers[i].lon;
			var locNr = arrMarkers[i].locNr;
			var city = arrMarkers[i].city;
			var zip = arrMarkers[i].zip;
			var land = arrMarkers[i].land;
			var info = arrMarkers[i].info;
			var latlngset = new google.maps.LatLng(lat, lng);
			var markOpt = {
				map: oMap2.map,
				position: latlngset,
				title: city
			};
			var marker = new google.maps.Marker(markOpt);
			oMap2.markers.push(marker);
 
			var contentInfoWindow = [
				'<div id="InfoText2">',
					'<div class ="tabs2">',
						'<ul>',
							'<li><a href="#tab3">General</a></li>',
							'<li><a href="#tab4" id="SV2">Street View</a></li>',
						'</ul>',
						'<div id="tab3">', 
							'<h3><b>' + locNr + '</h3></b>', '<p>' + city + '<BR>' + land + '<BR>' + zip + '<BR>' + info + '</p>',
						'</div>',
						'<div id="tab4">',
							'<div id="pano2"></div>',
						'</div>', 
					'</div>',	
				'</div>'		
				].join('');
			var infoWindowOptions = {
				content: contentInfoWindow,
				position: latlngset
			};
			var infowindow = new google.maps.InfoWindow(infoWindowOptions);
			setEventMarker2(marker, infowindow);
		};
		adjustViewPort2()
	};
}
function setEventMarker2(marker, infowindow) {
    google.maps.event.addListener(marker, "click", function () {
        infowindow.open(this.getMap(), this);
    });
 
    google.maps.event.addListener(infowindow, 'domready', function () {
        $(".tabs2").tabs();
        $('#SV2').click(function (e) {
            e.stopPropagation();
			var panoramaOptions = {
				position: marker.position
			};
			var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano2"), panoramaOptions);
			//oMap.map.setStreetView(panorama);
        });
    });
};
 
 
adjustViewPort2 = function() {
	if (oMap2.map) {
		var bounds = new google.maps.LatLngBounds();
		for (var i in oMap2.markers) {
			bounds.extend(oMap2.markers[i].getPosition());
		}
		oMap2.map.fitBounds(bounds);
}}

Merci par avance pour votre aide

Be seeing you Nom : prisoner_number_6_button_be_seeing_you_Xsmall.jpg
Affichages : 102
Taille : 1,9 Ko

**danielhagnoul** · 24/02/2016, 20h10

Chrome signale une erreur dans la console (touche F12).

Code du lien et code jQuery ci-dessus sont différents.
Dans le code du lien il manque une "}".

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
$(document).ready(function(){
   var jQueryTabs1Options = {
      show: false,
      event: 'click',
      collapsible: false
   };
   
   $("#jQueryTabs1").tabs( jQueryTabs1Options );
   
   $("#jQueryTabs1").on( 'tabsactivate', function(event, ui){
      var index = $("#jQueryTabs1").tabs('option', 'active');
      
      switch(index){
        case 1:
          if ( ( oMap.map === undefined ) && ( oMap.map === null ) ) {
            initMaps();
          }
      }
   });
});

Il a aussi un avertissement : "Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"

**NoSmoking** · 24/02/2016, 20h27

Bonjour,
pas vu cette discussion avant de répondre sur celle-ci StreetView ...Maps dans un onglet.

**informer** · 25/02/2016, 00h53

Bonjour danielhagnoul,

Envoyé par danielhagnoul

Chrome signale une erreur dans la console (touche F12).

Code du lien et code jQuery ci-dessus sont différents.
Dans le code du lien il manque une "}".

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
  
      switch(index){
        case 1:
          if ( ( oMap.map === undefined ) && ( oMap.map === null ) ) {
            initMaps();
          }
      }
   });
});

Merci pour t'être penché sur mon cas mais le bout de code était une tentative de solution mais comme cela s'est révélé un cul de sac, suis revenu au code ci-dessous et retour à mon problème de propagation

Code :

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

1
2
3
4
5
6
7
 
 switch(index)
      {
         case 1:
            initMaps();
            break;
      }

Envoyé par danielhagnoul

Il a aussi un avertissement : "Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"

C'est vrai et je ne sais pas comment l'exploiter

Impossible de stopper la propagation dans JQuery tabs

jQuery

Discussions similaires

Partager

Partager