Bonjour à tous,
voici plusieurs semaines que je cherche de l'aide sur la création de cluster pour mes marqueurs sur une carte google map. Je travaille avec wordpress et je génère mes marqueurs grâce aux locations indiquées dans les champs du plugins ACF.

Pour la réalisation de la carte j'ai suivi ce tutoriel (qui fonctionne bien) : https://itsmereal.com/create-google-...6#comment-1967
Le script javascript associé 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
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
(function($) {
 
/*
*  new_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/
 
function new_map( $el ) {
 
    // var
    var $markers = $el.find('.marker');
 
 
    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
 
 
    // create map               
    var map = new google.maps.Map( $el[0], args);
 
 
    // add a markers reference
    map.markers = [];
 
 
    // add markers
    $markers.each(function(){
 
        add_marker( $(this), map );
 
    });
 
 
    // center map
    center_map( map );
 
 
    // return
    return map;
 
}
 
/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/
 
function add_marker( $marker, map ) { 
    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var icon = $marker.attr('data-img');
    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        icon        : icon
    });
 
    // add to array
    map.markers.push( marker );
 
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });
 
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {          
 
            infowindow.open( map, marker );
 
        });
    }
 
}
 
/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/
 
function center_map( map ) {
 
    // vars
    var bounds = new google.maps.LatLngBounds();
 
    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){
 
        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
 
        bounds.extend( latlng );
 
    });
 
    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }
 
}
 
/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/
// global var
var map = null;
 
$(document).ready(function(){
 
    $('.acf-map').each(function(){
 
        // create map
        map = new_map( $(this) );
 
    });
 
            //zoom
            google.maps.event.addListener( map, 'zoom_changed', function( e ) {
 
            var zoom = map.getZoom();   
 
             if(zoom!= 5)           
             {
            var bounds = map.getBounds();
 
               myLatLngss = [];
                $.each( map.markers, function( i, marker ){         
            var myLatLng = new google.maps.LatLng(marker.position.lat(), marker.position.lng() );   
 
            if(bounds.contains(myLatLng)===true) {                      
                     myLatLngss.push( myLatLng );
                    }
                    else {
 
                    }
            });
               if(myLatLngss.length > 0)
               { 
                 document.cookie = "coordn="+myLatLngss;
                 $("#customzm").load(location.href + " #customzm");                 
               } 
            } 
 
           });
   google.maps.event.addListener(map, 'dragend', function() {
   //alert('map dragged');
   var bounds = map.getBounds();
 
                  myLatLngss = [];
                $.each( map.markers, function( i, marker ){
 
            var myLatLng = new google.maps.LatLng(marker.position.lat(), marker.position.lng() );   
 
            if(bounds.contains(myLatLng)===true) {                      
                     myLatLngss.push( myLatLng );
                    }
                    else {
 
                    }
           if(myLatLngss.length > 0)
               {
                 document.cookie = "coordn="+myLatLngss;
                 $("#customzm").load(location.href + " #customzm");                 
               }
            });
 
 } );
 
 
});
 
})(jQuery);
D'après la doc de google, pour avoir les clusters il faut rajouter :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
J'ai essayé de le rajouter à de nombreux endroits sans succès. La carte disparaît totalement de ma page.

Savez-vous comment remédier à ce probleme ?
Merci !