Discussion :

[informer]

Bonjour à tous,

Ok c'est totalement abscons et j'en suis désolé. Mais le truc est le suivant:

J'ai dans ma forme "Formulaire" , un onglet dont l'une des pages affiche une Google Maps.
On ne se décourage pas...
Au marker positionné sur la Google Maps, est attachée une infoWindow composée d'un onglet. Sur le deuxième onglet, j'affiche la strretView correspondante au LatLong du marker. Enfin j'essaye car c'est là que commence mon problème!

Mon code sous ready(function) est :

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
$(document).ready(function()
	$("#idTab").tabs();
	$("#idTab").tabs({
		activate: function(event, ui){	GoogleMap();}	
	});
 
function GoogleMap() 
{	var oDataSQL =  ajaxXHR("setInfo"); 
	var name  = oDataSQL[0]["NAME"];
	var latitude  = parseFloat(oDataSQL[0]["LATITUDE"]);
	var longitude  = parseFloat(oDataSQL[0]["LONGITUDE"]);
	var id  = "GoogleMaps";
 
	var latlngMarker = new google.maps.LatLng(latitude, longitude);
 
	var mapOptions = 
	{	zoom: 12,
		center: latlngMarker,
		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
	};	
 
	var mapID = document.getElementById(id);
	var map = new google.maps.Map(mapID, mapOptions);   
 
	var markerOpts =	
	{	position: latlngMarker,
		map:map,
		title: name
	};
 
	var marker = new google.maps.Marker(markerOpts);
 
	var contentInfoWin =
	[	'<div id="infoWin">',
			'<div class ="tabs">',
				'<ul>',
					'<li><a href="#tab1">Infos</a></li>',
					 '<li><a href="#tab2" id="SV">Street View</a></li>',
				'</ul>',
				'<div id="tab1">' + name + '</div>',
				'<div id="tab2">',
					'<div id="pano"></div>',
				'</div>',
			'</div>',
		'</div>'
	].join('');
 
	var InfoWinOpts = 
	{	content  : contentInfoWin,
		position : latlngMarker
	};
 
	var infoWin = new google.maps.InfoWindow(InfoWinOpts);
	google.maps.event.addListener(marker, 'click', function()
	{	infoWin.open(map,marker);
	});
 
	var panoOpts = {position: marker.position};
	google.maps.event.addListener(infoWin, 'domready', function()
	{	$(".tabs").tabs();
		$('#SV').click(function()
			{	var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoOpts);  
				map.setStreetView(panorama);
			});
	});

C'est ce bout de code qui résiste :

Code :

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

1
2
3
4
5
6
7
	var panoOpts = {position: marker.position};
	google.maps.event.addListener(infoWin, 'domready', function()
	{	$(".tabs").tabs();
		$('#SV').click(function()
			{	var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoOpts);  
				map.setStreetView(panorama);
			});

Alors j'ai essayé avec ça mais le patient ne réagit pas plus!

Code :

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

1
2
3
4
5
6
7
8
9
var panoOpts = {position: marker.position};
	google.maps.event.addListener(infoWin, 'domready', function()
	{	$(".tabs").tabs();
		$("#SV").tabs({
		activate: function(event, ui)
		{	var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoOpts);  
			map.setStreetView(panorama);
		}	
	});

Il y a open web code ici après avoir validé l'accès

Toute aide est la bienvenue. Merci !


Be seeing you

[Watilin]

Je suis pas sûr de ce que j'avance mais peut-être que ça marchera mieux en retirant ce listener sur 'domready', étant donné que tout ça est déjà dans une fonction .ready().

[NoSmoking]

Bonjour,

... en retirant ce listener sur 'domready', ...

dans ce cas le 'domready' s'applique à l'infoWindow via le gestionnaire google.maps.event et est donc indépendant de .ready.

C'est ce bout de code qui résiste :...

• pourquoi map.setStreetView(panorama) ?, essaies en mettant en commentaire.
• à chaque fois que tu ouvres l'infoWindow tu récrées ton StreetViewPanorama et tu rajoutes les événements ?

[informer]

Bonjour NoSmoking

Toujours un plaisir d'échanger avec toi!

Bon j'ai supprimé la ligne map.setStreetView(panorama) reliquat d'un précédent dév mais pas plus de résultat.

De plus le code suivant n'est jamais appelé:

Code :

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

1
2
3
4
5
$("#SV").tabs({
		activate: function(event, ui)
		{	var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoOpts);  
 
		}

Dans l'explorateur d'objets NetBeans, voici les infos disponibles. Et SV a cette valeur a#SV.ui-tabs-anchor. Cela pose-t-il un problème?



Quant à la question 2, je suis preneur de toute meilleure solution.

Merci encore pour ton aide



Be seeing you

[NoSmoking]

Je me rend compte que ma réponse est incomplète, il manque le fait qu'il faur que tu rendes visible ton StreetViewPanorama celui ci étant construit alors que son conteneur est hidden.

Quant à la question 2, je suis preneur de toute meilleure solution.

c'est dans le séquencement qu'il faut traiter le problème.
A la première ouverture, et uniquement à la première, on crée le StreetViewPanorama et on affecte les événements, une seule fois donc, après on n'a plus rien à gérer.

Cela pourrait donner en surchargeant l'objet

Code :

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

1
2
3
4
5
6
// création infobulle
var oInfo = new google.maps.InfoWindow({
    'content'  : contentMarker,
    'idPano'   : idPano,
    'refPano'  : null
  });

et sur le 'domready'

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
// attention domready à chaque ouverture de la fenêtre
google.maps.event.addListener( oInfo, 'domready', function () {
  // garde info du vrai this 
  var thisInfo = this;
  // si 1st, création
  if( ! thisInfo.refPano){
    // active le système d'onglets
    $(".tabs").tabs();      
    //Création d'un street view panorama
    thisInfo.refPano = new google.maps.StreetViewPanorama(
        document.querySelector( '#' +thisInfo.idPano),
        {
            'position' : thisInfo.getPosition()
        }
      );        
    // obligé si la création s'est fait en mode hidden (onglet caché)
    $('.SV').on('click' ,function () {            
      thisInfo.refPano.setVisible(true);
    });
  }

pour avoir un aperçu du total suit un exemple complet d'une façon de faire

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>[Google Maps API]StreetViewPanorama et Tabs Widget</title>
<meta name="Author" content="NoSmoking">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?language=fr&v=3"></script>
<style>
html, body {
        height: 100%;
        margin: 0px; 
        padding: 1em; 
  box-sizing:border-box;
}
#div_carte { 
        height:100%;
}
.infotext {
  width:480px;
  height:380px;
}
.tabs {
  width:450px;
  height:350px;
}
.pano {
  width:100%;
  height: 280px;
}
</style>
<script>
var tMarker = [
  { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon',      'info' :'<b>Lyon<\/b><br>la suite du texte...'},
  { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris',     'info' :'<b>Paris<\/b><br>la suite du texte...'},
  { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux',  'info' :'<b>Bordeaux<\/b><br>la suite du texte...'},
  { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br>la suite du texte...'}
];
var oMap = null;
 
function initCarte () {
  // création de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"),{
    'zoom' : 6,
    'center' : new google.maps.LatLng( 46.80, 1.75),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  for( i=0; i < tMarker.length; i++){
    addMarker(tMarker[i]);
  }
}
 
function addMarker ( data){
  // get ID unique
  oMap.timeID = oMap.timeID ? ++oMap.timeID :  new Date().getTime();
  var idPano = 'pano' + oMap.timeID;  
  
  // création marker
  oMarker = new google.maps.Marker({
      'position' : {lat: data.lat, lng: data.lon},
      'map' : oMap,
      'title' : data.title
    });    
 
  var contentMarker = [
    '<div class="infotext">', 
      '<div class ="tabs">',
        '<ul>', 
          '<li><a href="#tab1_' +oMap.timeID +'" class="IG">General</a></li>',
          '<li><a href="#tab2_' +oMap.timeID +'" class="SV">Street View</a></li>',
        '</ul>', 
        '<div id="tab1_' +oMap.timeID +'">', 
          '<h3>' + data.title + '</h3>',
          '<p> Coordonnées GPS : ' + oMarker.getPosition().toUrlValue(6)  + '</p>',
          '<p>' + data.info  + '</p>',
        '</div>', 
        '<div id="tab2_' +oMap.timeID +'">',
          '<div class="pano" id="' +idPano +'"></div>', 
        '</div>',
      '</div>',
    '</div>'
  ].join('');
  // création infobulle
  var oInfo = new google.maps.InfoWindow({
      'content'  : contentMarker,
      'idPano'   : idPano,
      'refPano'  : null
    });
 
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, "click", function () {
        // affichage InfoWindow
        if( !oInfo.getMap()){
          oInfo.open( this.getMap(), this);
        }
      });
 
  // attention domready à chaque ouverture de la fenêtre
  google.maps.event.addListener( oInfo, 'domready', function () {
    // garde info du vrai this 
    var thisInfo = this;
    // si 1st, création
    if( ! thisInfo.refPano){
      // active le système d'onglets
      $(".tabs").tabs();      
      //Création d'un street view panorama
      thisInfo.refPano = new google.maps.StreetViewPanorama(
          document.querySelector( '#' +thisInfo.idPano),
          {
              'position' : thisInfo.getPosition()
          }
        );        
      // obligé si la création s'est fait en mode hidden (onglet caché)
      $('.SV').on('click' ,function () {            
        thisInfo.refPano.setVisible(true);
      });
    }
  });
}
google.maps.event.addDomListener(window,'load', initCarte);
</script>
</head>
<body>
  <div id="div_carte"></div>
</body>
</html>

Le code peut être allégé si une seule infoWindow est à gérer, et ce notamment en ce qui concerne les ID.

[informer]

Bonsoir NoSmoking,

Je te remercie pour ces infos que je vais maintenant essayer d'intégrer à mon projet.

Et que penses tu de ces solutions
avec une variable globale

Code :

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

1
2
3
4
5
6
var pageInitialized = false;
$(function()
{  if(pageInitialized) return;
    pageInitialized = true;
    // Put your init logic here.
});

Avec one

Code :

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

1
2
3
4
 // Fired once when document is ready
        $(document).one('ready', function () {
              doSomething();
        });

Je dois charger dans une même page plusieurs fichiers JS avec $(document).ready(function(), cela provoque-t-il un comportement incohérent?Nouveau post: cliquer ici


Merci encore pour ton aide

Be seeing you