Discussion :

[stevensavior]

Bonjour à tous,

En fonction du code suivant je voudrais associer aux marqueurs leur infowindows contenant une iframe.

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
 
var tMarker = [
  { lat :  43.55646946876383,
    lon :  6.953457007270799,
    title : 'CAM 01'
  },
  { lat : 43.364573,
    lon : 7.73551,
    title : 'CAM 03'
  },
  {lat : 43.381339,
   lon : 7.8021,
   title : 'CAM 04'
  },
  {
    lat : 433830.74,
    lon : 7.75940,
    title : 'CAM 05'
  }
];
 
function createMarqueur( tab, map){
  var oLatLng, oMarker, data;
  var i, nb = tab.length;
 
 
  for( i = 0; i < nb; i++){
    data = tab[i];
    oLatLng = new google.maps.LatLng( data.lat, data.lon);
    oMarker = new google.maps.Marker({
      position : oLatLng,
      map : map,
      title : data.title	  
    });
  var image = 'images/camera.png';	
    oMarker.setIcon(image);	
  }
}
 
createMarqueur( tMarker, map);

J'imagine qu'il faut faire un array de content d'infowindows, mais comment s'y prendre pour les lier aux marqueurs et surtout comment y intégrer une iframe ?

Merci de votre aide

[stevensavior]

Bon j'ai trouvé en m'aidant de la FAQ:

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
 
  var tMarker = [
    { 'lat' :43.55646946876383, 'lon' : 6.953457007270799, 'title' :'CAM 01 - D6007 - Giratoire des Tourrades', 'info' :'<div class="content">'+'<iframe src="../CAMS/01.html" height="390px" width="187px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :43.364573, 'lon' : 7.73551, 'title' :'CAM 03 - D6007 - Marineland', 'info' :'<div class="content">'+'<iframe src="../CAMS/03.html" height="390px" width="187px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :43.381339, 'lon' : 7.8021, 'title' :'CAM 04 - D6007 - Z.I Villeneuve',  'info' :'<div class="content">'+'<iframe src="../CAMS/04.html" height="390px" width="187px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :433830.74, 'lon' : 7.75940, 'title' :'CAM 05 - D6007 - Giratoire des Rives', 'info' :'<div class="content">'+'<iframe src="../CAMS/04.html" height="390px" width="187px" frameborder="0" scrolling="no"></iframe>'+'</div>'}
  ];
 
  var oMarker, oInfo;
  var i, nb = tMarker.length;
 
  // création infobulle
  var oInfo = new google.maps.InfoWindow({
  maxWidth: 400
  });
  // création des markers
  for( i = 0; i < nb; i++){
    // création marker
    oMarker = new google.maps.Marker({
      'numero' : i,           // ici on sauve la valeur de i	
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : map,
      'title' : tMarker[i].title
    });
	var image = 'images/camera.png';	
    oMarker.setIcon(image);
 
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function() {
      // affectation du contenu
	  oInfo.setContent( tMarker[this.numero].info);
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }

L'iframe s'affiche mais pas correctement, elle est en partie tronquée



J'ai pourtant spécifié un style css à la classe "content"

Code :

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

1
2
3
4
 
div.content {
    min-width: 400px;
}

et indiqué une largeur minimale pour l'infowindow

Code :

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

1
2
3
4
 
var oInfo = new google.maps.InfoWindow({
    maxWidth: 400
});

Merci de m'aider

[stevensavior]

A force de chercher on fini toujours par trouver

On inclus ce style css directement les variables des markers:

Code :

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

1
2
3
4
5
6
7
 
  var tMarker = [
    { 'lat' :43.55646946876383, 'lon' : 6.953457007270799, 'title' :'CAM 01 - D6007 - Giratoire des Tourrades', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/01.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :43.364573, 'lon' : 7.73551, 'title' :'CAM 03 - D6007 - Marineland', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/03.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :43.381339, 'lon' : 7.8021, 'title' :'CAM 04 - D6007 - Z.I Villeneuve',  'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/04.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :433830.74, 'lon' : 7.75940, 'title' :'CAM 05 - D6007 - Giratoire des Rives', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/04.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'}
  ];

Puis on défini une largeur maximale pour l'infowindow:

Code :

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

1
2
3
4
5
 
 
oInfo = new google.maps.InfoWindow({
    maxWidth: 354
});

Amusez-vous bien