Cluster events on events_map – how to

Hi again to the community!

My website is coming along great thanks to EM and OSM EM, so happy about it!

I have a lot of work on the styling end which I can figure out by “fooling around” but something I’ll need help with as I am a massive noob in php and JS (I know my html and css, pretty impressive right?) is clustering location markers….

As some of you might already know, there is way to make one’s map location markers cluster (merge) into one new icon with the numbers of markers merged written on top of it.

Here you can see the final results (in french, sorry): tutorial in french

And I’ve found this website which guides me through the step to get one’s map to do that, and which I based my attempt on: Tutorial in english

Despite the rather clear information they give, I am struggling quite a bit on how and where to apply the code within the OSM EM files.
The results for me is avery zoomed map with any events on it ( I’m talkin here about [Events_map])

Apparently there is 4 pieces to it:
1. The links

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

which I paste in the header using the header and footer plug-in.

2. Then you create a markers for cluster:
var markers = L.markerClusterGroup();

3. Then add the markers to the cluster group:
markers.addLayer(marker);

4. Then add the cluster groups to the map:
map.addLayer(markers);

So as I said, I added my links and script src in the header with the header n footer plug-in, as pasted in the previous part of the topic.
And then I added the rest as follow in the em_osm-maps.php
From line 348:

				var map<?php echo $id; ?> = L.map('em-osm-map-<?php echo $id; ?>', {
				    center: [Lat, Lng],
				    minZoom: 0,
				    maxZoom: 19,
				    zoom: zoomLevel,
				    zoomControl: zoomButtons,
				    zoomSnap: 0.25,
					scrollWheelZoom: mobileZoom,
					dragging: mobileDrag,
				});
                

				L.tileLayer(mapTiles, {
					attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">OpenStreetMap</a>',
				}).addTo(map<?php echo $id; ?>);
                
                                var markers = L.markerClusterGroup();

				map<?php echo $id; ?>.fitBounds([[highLat, highLng], [lowLat, lowLng]], {padding:[50,50]});

				for (var i = 0; i < locations.length; i++) {
					marker = new L.marker([locations[i][1],locations[i][2]], {icon: mapIcon},).addTo(map<?php echo $id; ?>).bindPopup(locations[i][0]);
                    markers.addLayer(marker);
				}
                map.addLayer(markers);
				function clickZoom(e) {
					map<?php echo $id; ?>.setView(e.target.getLatLng(),zoomLevel);
				}

And I get an apparently common error message:
“(index):367 Uncaught TypeError: L.markerClusterGroup is not a function
at (index):367”

If anyone would have the patience to took into that, or if you already managed to get clusters working with OSM-EM, I’d love to hear about how you managed!
I’m an absolute noob in php and js, so what I wrote ( copy/paste ) might not make any sense, very likely!

Thanks for taking the time to read so far, and till next time, have a nice day!

The page I need help with: [log in to see the link]