[Google Maps] Polylines et icônes cliquables

Merci encore à vous tous pour les progrès que vous m'avez permis de faire . Aujourd'hui je suis devant un nouveau défi ( enfin pour moi). Je sais créer une carte avec des maker cliquables avec une iframe qui s'ouvre, d'un autre cotés je sais créer une carte avec des polylines, j 'aimerais maintenant lier les deux, comment superposer les icônes sur les point GPS qui marque chaque coordonnée de ma polylines ( ces points sont représentés par des "CIRCLE" dans le script; voilà je vous laisse une partie du code pour que vous puissiez juger des avancés de ma réflexion.

Code:

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
 
 
 
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 
function initCarte(){
 
  var i, nb = data.length;
  var oMarker, oPolyline, oPath =[];
  var oMap = new google.maps.Map(document.getElementById('div_carte'),{
  'center': new google.maps.LatLng(47,2),
      'zoom': 7,
      'backgroundColor': '#fff',
      'streetViewControl': false,
      'zoomControlOptions': {
        'style': google.maps.ZoomControlStyle.SMALL
      },
      'mapTypeId': google.maps.MapTypeId.HYBRID,
    });
  // on boucle sur les données
  for( i=0; i < nb; i++){
    // création du marker, optionnel
    oMarker = new google.maps.Marker({
        'map' : oMap,
        // icone personalisée
        'icon':{
          'path': google.maps.SymbolPath.CIRCLE,
          'fillColor': 'white',
          'fillOpacity': 0.5,
          'scale': 6,
          'strokeColor': 'red',
          'strokeWeight':1
        },
        'position': new google.maps.LatLng( data[i][0], data[i][1])
      });
     // stocke les donnees au format new google.maps.LatLng
     oPath.push( new google.maps.LatLng( data[i][0], data[i][1]));
  }
  // creation de la polyline trajet
  oPolyline = new google.maps.Polyline({
      'path' : oPath,
      'map': oMap,
      'strokeColor': "#FF0000",
      'strokeOpacity': 0.6,
      'strokeWeight': 3
    });
 
 
/////////////////////////////////////////////////////////  ici la partie icône cliquables ////////////////////////////////   ne fonctionne pas 
 
 
var locations = [
 
 
 
 
[' src = " <iframe width = " 400 " height = " 300 " src = " https://xxxxxxxxx/6047086 " frameborder = " 0 " allowfullscreen></iframe > " ', 47.311, 1.7637, 0],
[' src = " <iframe width = " 400 " height = " 300 " src = " https://xxxxxxxxx/5896458 " frameborder = " 0 " allowfullscreen></iframe > " ', 47.792, 1.0653, 0],
[' src = " <iframe width = " 400 " height = " 300 " src = " https://xxxxxxxxx/5797434 " frameborder = " 0 " allowfullscreen></iframe > " ', 48.006, 0.1995, 0],
 
 
 
];
 
 
var infowindow = new google.maps.InfoWindow();
var monIconPerso = new google.maps.MarkerImage("icones/bleue.png"),i;
for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({
icon : monIconPerso,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(div_carte, marker);
}
})(marker, i));
}
 
}
 
 
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
  <div id="div_carte"></div>