MarkerClusterer sur un array de markers déjà existant

**stevensavior** · 16/08/2014, 11h47

Bonjour à tous

Je voudrai intégrer markerclusterer dans le code suivant où des markers sont déjà déclarés dans un array.
J'ai tenté plusieurs choses mais sans résultat.

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
 
  var tMarker = [
    { 'lat' :43.55642785692451, 'lon' : 6.953729979398754, '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.61270407302382, 'lon' : 7.126529560436343, '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.63747366516169, 'lon' : 7.133577919294488, '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' :43.64228282836776, 'lon' : 7.133339389143196, 'title' :'CAM 05 - D6007 - Giratoire des Rives', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/05.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :43.65760885974611, 'lon' : 7.158658836931382, 'title' :'CAM 06 - M6007 - Carrefour Pinède', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/06.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},
    { 'lat' :43.66040496729115, 'lon' : 7.173712195870867, 'title' :'CAM 07 - M6007 - Val Fleuri', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/07.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.66029323252168, 'lon' : 7.180522609519915, 'title' :'CAM 08 - M6007 - Carrefour des Vespins', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/08.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.66192267801387, 'lon' : 7.193161623756978, 'title' :'CAM 09 - M6007 - Gare SNCF St Laurent', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/09.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.59283242394767, 'lon' : 7.12549080937212, 'title' :'CAM 10 - D6098 - Fort Carré', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/10.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.6964909195403, 'lon' : 7.192439687044487, 'title' :'CAM 13 - M6202 - Baraques Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/13.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.70094843071181, 'lon' : 7.189648534192604, 'title' :'CAM 14 - M6202 - Baraques Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/14.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.76807654292657, 'lon' : 7.208813211249458, 'title' :'CAM 15 - M6202 - Carrefour Manda', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/15.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.7990055182815, 'lon' : 7.206464351194261, 'title' :'CAM 16 - M6202 - Saint Blaise', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/16.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.84636292192978, 'lon' : 7.197375596355764, 'title' :'CAM 17 - M6202 - Baus Roux', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/17.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.86186871393349, 'lon' : 7.199813652090723, 'title' :'CAM 18 - M6202 - Pont Durandy', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/18.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.91585180861906, 'lon' : 7.188370707356978, 'title' :'CAM 19 - M6202 - Viaduc Mescla', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/19.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.75612655638089, 'lon' : 7.192123689824757, 'title' :'CAM 20 - M6202 Bis - Plan de Gattières', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/20.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.76631968674393, 'lon' : 7.200274682284584, 'title' :'CAM 21 - D6202 - Carros Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/21.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.76631513914839, 'lon' : 7.202095534691417, 'title' :'CAM 22 - D2210 - Manda Ouest', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/22.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.76765983201641, 'lon' : 7.198987692331075, 'title' :'CAM 23 - D1 - Côteaux d&apos;Azur', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/23.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.61961919682671, 'lon' : 6.949506280347985, 'title' :'CAM 24 - D6185 - Grand Vallon', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/24.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.67739701716642, 'lon' : 6.90117286950054, 'title' :'CAM 25 - D6085 - Prison Grasse', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/25.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.59736443433993, 'lon' : 7.090392893628197, 'title' :'CAM 26 - D35 - Croix Rouge', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/26.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.6066768756017, 'lon' : 7.059609564117864, 'title' :'CAM 27 - D35 - Carrefour Clausonnes', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/27.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.64941283763799, 'lon' : 7.137301172506587, 'title' :'CAM 28 - D2d - Logis du Loup', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/28.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.78215174637689, 'lon' : 7.338092273275771, 'title' :'CAM 29 - D2204 Bis - Pointe de Contes', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/29.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.58654755466656, 'lon' : 7.091092954719113, 'title' :'CAM 31 - D35 Bis - Giratoire St Jean', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/31.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.60527436257394, 'lon' : 7.083297181961598, 'title' :'CAM 32 - D535 - Trois Moulins', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/32.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.61564095663169, 'lon' : 7.081309307215046, 'title' :'CAM 33 - D535 - Les Chappes', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/33.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.61475200778867, 'lon' : 7.04671505403538, 'title' :'CAM 34 - D103 - Les Lucioles', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/34.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.66078088579101, 'lon' : 7.144058166329991, 'title' :'CAM 35 - M336 - Giratoire Boualam', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/35.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.78754097110507, 'lon' : 7.214199137017475, 'title' :'CAM 37 - D901 - 8eme Rue', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/37.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.8040799845424, 'lon' : 7.195653115772759, 'title' :'CAM 38 - D901 - 15eme Rue', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/38.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.81260626900394, 'lon' : 7.185769869376636, 'title' :'CAM 39 - D901 - 18eme Rue', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/39.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.8281267024359, 'lon' : 7.183037283983436, 'title' :'CAM 40 - D901 - Pont de l&apos;Estéron', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/40.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :44.13975653786866, 'lon' : 7.570658161776012, 'title' :'CAM 41 - D6204 - Tunnel de Tende', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/41.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.65787550930642, 'lon' : 7.120782218170917, 'title' :'CAM 42 - D2085 - Giratoire des Plans', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/42.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.65289105698938, 'lon' : 7.143026733626205, 'title' :'CAM 43 - D2085 Bis - Domaine du Loup', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/43.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.90126836356656, 'lon' : 7.18995358577186, 'title' :'CAM 44 - M6202 - Mescla/Reveston', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/44.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.83952376011902, 'lon' : 7.193943527925871, 'title' :'CAM 45 - M6202 - Charles Albert Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/45.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.69834896893057, 'lon' : 7.186772220915066, 'title' :'CAM 46 - M6202 Bis - Pont des Baraques', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/46.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.6414746808688, 'lon' : 6.936279060396647, 'title' :'CAM 48 - D6185 - Aspres Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/48.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.60243844032146, 'lon' : 7.084461343017594, 'title' :'CAM 49 - D35 - St Claude', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/49.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.61784531932742, 'lon' : 7.038193019117474, 'title' :'CAM 52 - D103 - Giratoire des Bouillides', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/52.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.63041445349489, 'lon' : 7.044891093574752, 'title' :'CAM 53 - D604 - Macarons Ouest', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/53.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.76385952984204, 'lon' : 7.320003942368365, 'title' :'CAM 54 - D2204 Bis - Condamine Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/54.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :44.18854806065928, 'lon' : 7.052937937425942, 'title' :'CAM 55 - M97 - Isola Village', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/55.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.67314217050052, 'lon' : 7.198590999999965, 'title' :'CAM 56 - Préfecture Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/56.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.67293652830022, 'lon' : 7.198247677246059, 'title' :'CAM 57 - Préfecture Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/57.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.89610124211211, 'lon' : 7.190634364838799, 'title' :'CAM 58 - M6102 - Reveston Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/58.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.64500487060375, 'lon' : 6.892446685208909, 'title' :'CAM 59 - D2562 - Giratoire des Thermes', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/59.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.724689076330485, 'lon' : 7.39210340763475, 'title' :'CAM 60 - M6007 - Cap d Ail Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/60.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.61145187485729, 'lon' : 7.126741422124837, 'title' :'CAM 61 - D6098 - Siesta', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/61.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.63071058190351, 'lon' : 7.13486484879735, 'title' :'CAM 62 - D6098 - Marina Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/62.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.72198872829454, 'lon' : 7.369205214370592, 'title' :'CAM 63 - M6098 - Cap Estel Ouest', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/63.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.72236948155457, 'lon' : 7.377161366281104, 'title' :'CAM 64 - M6098 - Cap Estel Est', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/64.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.88786313556805, 'lon' : 7.189898647061939, 'title' :'CAM 65 - M6102 - Gare Tinée', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/65.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.63671570675098, 'lon' : 6.941477501766258, 'title' :'CAM 66 - D6185 - Aspres Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/66.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.58805843046054, 'lon' : 7.003750930433371, 'title' :'CAM 67 - D6185 - Churchill Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/67.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.91312926877325, 'lon' : 7.188516170893296, 'title' :'CAM 68 - M6202 - Toboggan Mescla', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/68.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.72505337091434, 'lon' : 7.18759134614707, 'title' :'CAM 70 - M6202 - Lingostière', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/70.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.77152163433173, 'lon' : 7.207953967563277, 'title' :'CAM 71 - D901 - 1ere Rue', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/71.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.76030890608089, 'lon' : 7.195220870186734, 'title' :'CAM 72 - M6202 BIS - Pont de Gattières', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/72.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.56133673357868, 'lon' : 6.950881833556423, 'title' :'CAM 74 - D1009 - St Exupery', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/74.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.74070691137725, 'lon' : 7.18147486349077, 'title' :'CAM 78 - M6202 Bis - Gattières Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/78.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.73533603305682, 'lon' : 7.291185329343076, 'title' :'CAM 79 - M2204 Bis - Trinité Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/79.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.77477769083249, 'lon' : 7.332209502615787, 'title' :'CAM 80 - M2204 Bis - Condamine Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/80.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.97712932289951, 'lon' : 7.541572318227411, 'title' :'CAM 81 - D6204 - Saorge Sud', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/81.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.98301477521372, 'lon' : 7.545563640617088, 'title' :'CAM 82 - D6204 - Saorge intermédiaire', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/82.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :43.98902083830232, 'lon' : 7.548491857661348, 'title' :'CAM 83 - D6204 - Saorge Nord', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/83.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'},	
    { 'lat' :44.23512039054457, 'lon' : 6.752112891857109, 'title' :'CAM 84 - D2202 - Estenc', 'info' :'<div style="overflow:hidden;line-height:1.35;min-width:354px;">'+'<iframe src="../CAMS/84.html" height="290px" width="354px" frameborder="0" scrolling="no"></iframe>'+'</div>'}	
  ];
 
  var oMarker, oInfo;
  var i, nb = tMarker.length;
 
  // création infobulle
  oInfo = new google.maps.InfoWindow({
	maxWidth: 354
  });
  // 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);
    });
  }

Merci de votre aide

**stevensavior** · 17/08/2014, 07h23

Si quelqu'un sait aussi comment afficher/cacher les markeurs de tMarker par une checkbox ca serait sympa de m'aider.

Merci d'avance

**OnTouris** · 29/11/2014, 02h16

Bonjour,

je rencontre actuellement les mêmes problèmes.
Avez-vous trouver la réponse à vos questions ? pour quelles solutions avez vous optées ?

je vous remercie :-)

**NoSmoking** · 29/11/2014, 22h06

Bonjour,

je rencontre actuellement les mêmes problèmes.

...mais pour être plus précis ?

**stevensavior** · 30/11/2014, 12h04

Bon je vais vous décrire la procédure pour utiliser markerclusterer avec de nombreux markers, et les afficher par le biais de case à cocher.

Vu que j'ai pas mal galéré moi-même à le faire, j'aurais bien voulu que quelqu'un me décrive le principe de fonctionnement à l'époque, ça m'aurait gagner beaucoup de temps...

Dans le cas présent on va utiliser markerclusterer sur des markeurs représentant des webcams.

Tout en haut de votre code avant la function initialize() on défini une variable globale qui va contenir un array de nos markeurs:

Code :

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

var webcams = [];

On définit aussi une variable qui sera utile pour afficher nos markers avec une checkbox:

Code :

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

var webcamcluster;

Dans notre function initialize() on ajoute un markeur d'une webcam.

On défini une icone pour le markeur:

Code :

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

var icon_webcam01=new google.maps.MarkerImage("images/webcam.png");

On défini le contenu de l'infowindow:

Code :

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

   var content_webcam01='<div style="overflow:hidden;line-height:1.35;min-width:360px;">'+'<iframe src="http://trafic.autoroutes-trafic.fr/webcamApp/webcam.aspx?id=Escota_A51_152" height="420px" width="360px" frameborder="0" scrolling="no"></iframe>'+'</div>';

On crée l'infowindow pour le marker:

Code :

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

   var infowindow_webcam01 = new google.maps.InfoWindow({ content: content_webcam01});

On défini son emplacement:

Code :

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

   var pt_webcam01=new google.maps.LatLng(44.440200, 6.029248);

On crée le markeur:

Code :

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

   var mk_webcam01=new google.maps.Marker({position:pt_webcam01, map:map, icon:icon_webcam01, title:'AUTOROUTE A51 - Axe : Saulce vers Grenoble'});

On place le markeur "mk_webcam01" dans la variable "var webcams = [];" qui contient l'array de tous nos markeurs:

Code :

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

   webcams.push(mk_webcam01);

On place le code pour ouvrir l'infowindow par un clic sur le markeur:

Code :

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

   google.maps.event.addListener(mk_webcam01,'click' , function() {showInfoWindow(infowindow_webcam01,mk_webcam01);});

Au final nous avons:

Code :

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

1
2
3
4
5
6
7
   var icon_webcam01=new google.maps.MarkerImage("images/webcam.png");
   var content_webcam01='<div style="overflow:hidden;line-height:1.35;min-width:360px;">'+'<iframe src="http://trafic.autoroutes-trafic.fr/webcamApp/webcam.aspx?id=Escota_A51_152" height="420px" width="360px" frameborder="0" scrolling="no"></iframe>'+'</div>';
   var infowindow_webcam01 = new google.maps.InfoWindow({ content: content_webcam01});
   var pt_webcam01=new google.maps.LatLng(44.440200, 6.029248);
   var mk_webcam01=new google.maps.Marker({position:pt_webcam01, map:map, icon:icon_webcam01, title:'AUTOROUTE A51 - Axe : Saulce vers Grenoble'});
   webcams.push(mk_webcam01);   
   google.maps.event.addListener(mk_webcam01,'click' , function() {showInfoWindow(infowindow_webcam01,mk_webcam01);});

Pour ajouter un autre markeur on changera les variables propres à un autre markeur:

Code :

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

1
2
3
4
5
6
7
   var icon_webcam02=new google.maps.MarkerImage("images/webcam.png");
   var content_webcam02='<div style="overflow:hidden;line-height:1.35;min-width:360px;">'+'<iframe src="http://trafic.autoroutes-trafic.fr/webcamApp/webcam.aspx?id=Escota_A8_187" height="420px" width="360px" frameborder="0" scrolling="no"></iframe>'+'</div>';
   var infowindow_webcam02 = new google.maps.InfoWindow({ content: content_webcam02});
   var pt_webcam02=new google.maps.LatLng(43.686618, 7.190627);
   var mk_webcam02=new google.maps.Marker({position:pt_webcam02, map:map, icon:icon_webcam02, title:'AUTOROUTE A8 - Axe : Nice St Isidore vers Italie'});
   webcams.push(mk_webcam02);   
   google.maps.event.addListener(mk_webcam02,'click' , function() {showInfoWindow(infowindow_webcam02,mk_webcam02);});

Ensuite après notre liste de markeurs on défini un style pour le markerclusterer:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    webcamStyles = {
    'styles': [{
    height: 75,
    width: 75,
    maxZoom: 15,
    url: 'images/mcwebcam.png',
    textColor: '#ffffff',
    gridSize: 60	
  }
]};

On fait en sorte que nos markeurs ne soient pas visibles au chargement de la page, mais par le biais d'une fonction "shWebcams()"qui est décrite juste après ce code:

Code :

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

1
2
3
4
 
    for (var i = 0; i < webcams.length; i++) {
    webcams[i].setVisible(false);
    }

Après notre function initialize() on crée une fonction pour afficher les markers par une checkbox:

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
function shWebcams() {
 
    if(document.getElementById('chk9').checked == true){
		for (var i = 0; i < webcams.length; i++) {
		webcams[i].setVisible(true);
		}
		webcamcluster = new MarkerClusterer(map,webcams, webcamStyles); 
    }
    else
	{
		for (var i = 0; i < webcams.length; i++) {
		}
        webcamcluster.clearMarkers();
 
    }
}

Dans notre code HTML on inclue une checkbox qui affichera nos markers par le biais de la function shWebcams():

Code :

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

<input type="checkbox" id="chk9" onclick="shWebcams();" />

Pour finir on fait appel dans notre page html au javascript de markerclusterPlus 2.1.2 que vous pouvez télécharger à cette adresse:

Code :

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

1
2
 
<script type="text/javascript" src="../js/markerclusterer.js"></script>

Voilà j'espère que cela vous sera utile

MarkerClusterer sur un array de markers déjà existant [Google Maps]

APIs Google

Discussions similaires

Partager

Partager