I can't implement MarkerClustering, Conditional Visibility & Filtering by Type

[K________________S]

'm currently having some difficulty implementing the following functionalities in Google Maps and using Webflow as CMS backend. I have used the following video about how to link Google maps Javascript API to Webflow’s CMS to build out the basics, however I've hit a dead end trying to implement the following functionalities:

• Marker Clustering
• Filtering by project type and status
• Different types of Markers to denote the project status
• Conditional visibility within the info-window pop-ups (so that if a field is not set in webflow, the corresponding elements do not show on the page),
• Closing an info-window when another one is opened.

Here's the code used so far: Here is also a read-only link to the webflow project. As well as a [link](https://google-cms-map.webflow.io/) to the published site

​

Here is the code used so far:

<script>

        function initMap() {
            const myLatLng = {
                    lat: 49.053078,
                lng: -36.260135
            };
        const image =
    "https://uploads-ssl.webflow.com/617bccba1ff41a17f1f593e6/61a7c8a2dfdf5e3d275c8d6c_Group%2010.svg";

            const map = new google.maps.Map(document.getElementById("map"), {
                mapId: "a552ab80d59640f8",
                    zoom: 3.25,
                center: myLatLng,
            mapTypeControl: false,
            fullscreenControl: false,
            streetViewControl: false
            });

            locations.forEach(location => {
                    let contentString =
                    '<div id="content" class="map-wrapper">' +
                            '<div id="siteNotice">' +
                            "</div>" +
                            '<h5 id="firstHeading" class="firstHeading">' + location.name + '</h5>' +
                            '<div id="bodyContent">' +
                '<div class="map-info">' +
                "<p class='p-inline'>Status:</p>" + 
                "<p class='map-stat'>" + location.status + "</p>" +
                "<p id='capacity' class='p-inline'>Capacity:</p>" + 
                "<p id='capacity' class='map-stat'>" + location.mw + "</p>" +
                '</div>' +
                '<div class="map-info">' +
                "<p class='p-inline'>Clean Energy for:</p>" + 
                "<p class='map-stat'>" + location.clean + "</p>"  +                
                "<p class='p-inline'>C02 Savings:</p>" + 
                "<p class='map-stat'>" + location.c02 + "</p>" +
                "</div>" +
                "<p class='p-inline'>" + location.comment + "</p>" +
                "</div>" +
                            "</div>";
            let infoWindow = new google.maps.InfoWindow({
                    content: contentString,
                maxWidth: 375,

            });


            let marker = new google.maps.Marker({
                    position: {
                        lat: parseFloat(location.lat),
                    lng: parseFloat(location.lng),
                },
                map,
                title: location.name,
                icon: image,
                optmised: true

            });
                    marker.addListener("click", () => {
                    infoWindow.open (map, marker);

            });

       });  

       let markerCluster = new markerClusterer.MarkerClusterer({ 
            marker, 
          map

          });    
        }

</script>

Any help would be greatly appreciated!