Google Maps markerClusterer: how can I pass options at init when adding lib via unpkg?

Question

I'm currently trying to implement Google Maps JavaScript MarkerClusterer on a Magento 2 website.

As Magento 2 front-end workflow goes, I can't use ES6+ import/export feature (unless I'm in developer mode). There's no use of NPM in Magento 2.

MarkerClusterer documentation states that when adding via unpkg (which is what I do), the MarkerClusterer can be accessed at markerClusterer.MarkerClusterer (last line of the "Install" section here).

I'm fine when declaring my cluster object the following way (clusters are showing on map with default algorithm and renderer): let cluster = new markerClusterer.MarkerClusterer({ markers, map });.

However, I'm struggling with overriding default parameters (I need to add a clusterClass and custom icons).

At first (before I realised I won't be able to use ES6+ import/export feature), It worked like a charm when declaring my cluster object the following way:

let cluster = new MarkerClusterer(
    map,
    markers, {
        clusterClass: "marker-cluster__icon",
        imagePath: mapOperator.imageBasePath + "pin-cluster-",
    });

I have no clue about how to pass new options/parameters with the following syntax which I have no choice about using: let cluster = new markerClusterer.MarkerClusterer({ markers, map });.

I couldn't find any example over the internet as everyone is using NPM or any kind of other modern front-end workflows nowadays.

The following, as an example, is not working:

let config = {
    markers: {
        clusterClass: "marker-cluster__icon",
        imagePath: mapOperator.imageBasePath + "pin-cluster-",
    },
    map
}

let cluster = new markerClusterer.MarkerClusterer(config);

For me, that's still an obscure part of how javascript is working. Hope someone can lighten my path...

Answer 1

So thanks to @geocodezip, I was finally able to reach my goal. Following thread's answer (which is not exactly a duplicate) helped breaking the deadlock: Unable to apply custom icons for clustering in google maps markerclusterer because unable to provide position data.

One remaining caveat is that I wasn't able to add a custom CSS class to the label (to the marker cluster icon HTML element), which would have helped to get a more secured focus on it (than .map [title][aria-label][role="button"]) for styling the information of the amount of markers in a cluster.

I've tried several solutions including google.maps.MarkerLabel interface className property, clusterClass option as mentioned here and cssClass option as mentioned here, but none of them seemed to be working...

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster.png",
            },
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
};

let config = { map, markers, renderer };
let cluster = new markerClusterer.MarkerClusterer(config);

.map [title][aria-label][role="button"] {
    margin-top: -5px;
    margin-left: 5px;
    &:before {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        content: attr(aria-label);
        width: 16px;
        height: 16px;
        text-align: center;
        font-weight: 400;
        font-size: 10px;
        line-height: 16px;
        letter-spacing: -1px;
        background: #ffffff;
        border: 2px solid;
        border-radius: 50%;

        color: @red;
        border-color: @red;
    }
}