maplace.js Google Clustering

[jarvis]

Hi,

I hope someone can help. The following code combines jQuery DataTables and Google Maps to create filtering. This works perfectly.

What I'm trying to do, due to the volume of data is then include clustering.

I've got the relevant Clustering incude:

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

This is the full code to build the table/map:

        var locations = <?php echo $json_data; ?>

        $(document).ready(function () {
            // Initialize empty map instance
            var maplace = new Maplace({
                shared: {
                     zoom: 16
                 },
				controls_on_map: false,
				styles: {
						'Minimal': [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"57"}]},{"featureType":"poi","elementType":"geometry.stroke","stylers":[{"lightness":"1"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"visibility":"off"},{"color":"#484848"}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.bus","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.bus","elementType":"labels.text.fill","stylers":[{"saturation":"0"},{"lightness":"0"},{"gamma":"1.00"},{"weight":"1"}]},{"featureType":"transit.station.bus","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"weight":"1"},{"lightness":"0"}]},{"featureType":"transit.station.rail","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.rail","elementType":"labels.text.fill","stylers":[{"gamma":"1"},{"lightness":"40"}]},{"featureType":"transit.station.rail","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#d2d2d2"},{"visibility":"on"}]}]
				}			
            }).Load();		
			
			//new markerClusterer.MarkerClusterer({ locations, maplace });

            // Initialize DataTable
            var myTable = $('#mytable').DataTable({
                data: locations,
                pageLength: 10,
                columns: [
                    {data: 'title', title: 'City'},
                    {data: 'lat', title: 'Latitude'},
                    {data: 'lon', title: 'Longitude'},
                ],
                columnDefs: [
                    {targets: [0], width: '33%'},
                    {targets: [1], width: '33%'},
                    {targets: [2], width: '33%'},
                ],

                // When the table is redrawn, update the map with the visible rows
                drawCallback: function(settings) {
                    var api = this.api();

                    // Clear all markers when table is redrawn
                    var markers = {
                        'locations': []
                    };

                    // Page: all / search: applied - makes sure all pages are used with the applied filter
                    api.rows({page: 'all', search: 'applied'}).every(function(rowIdx, tableLoop, rowLoop) {
                        var data = this.data();
                        var loc = {
                            'lat': data.lat,
                            'lon': data.lon,
                            'html': data.html,
                            'icon': data.icon
                        };
                        markers.locations.push(loc);
						//new MarkerClusterer({ markers, maplace });

                        var row = this.node();

                        $(row).removeClass (function (index, css) {
                            return (css.match (/\brow-\d+/g) || []).join(' ');
                        });
                        $(row).addClass('row-'+ rowLoop);
                    });

                    // Load the map
                    maplace.Load({
                        locations: markers.locations						
                    });
					
					
		
                }
            });				

            // Add per column filters
            yadcf.init(myTable, [
                {
                    column_number: 0
                }
            ]);

            // Add event listener clicking on table and showing on map
            $('#mytable tbody').on('click', '.sorting_1', function () {
                var tr = $(this).closest('tr');
                var row = myTable.row(tr);

                // This is our class-populated row number
                var idx = Number(tr.attr('class').match(/(?:row-)(\d+)/)[1]) + 1;

                // Zoom to clicked record on map
                maplace.ViewOnMap(idx);
            });

			// Cluster the markers
			new markerClusterer.MarkerClusterer({ locations, maplace });
        });

But I can't see how to get the clustering to work?

I thought I'd be ok so include it and reference the map/markers. Perhaps it's where I've included the call? But I thought being the last part on the script would be the right way to go about it?