Documentation for setClusteringRenderer

[cma-42]

I tried a couple of approaches to use setClusteringRenderer in order to customize the marker clusters.

For example, in MyGoogleMap.java:

    setClusteringRenderer("{\n" +
                "    render: function ({ count, position }) {\n" +
                "        return new google.maps.Marker({\n" +
                "            label: {text: count.toString(), color: 'white', fontSize: '20px'},\n" +
                "            position,\n" +
                "            title: 'Zoom in to view resources in this area',\n" +
                "            // adjust zIndex to be above other markers\n" +
                "            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,\n" +
                "        });\n" +
                "    }\n" +
                "};");

However, I could never get it to work. In the example above, the issue is the strict mode, resulting in this error:

locations:2 Uncaught SyntaxError: In strict mode code, functions can only be declared at top level or inside a block.
    at PolymerGenerated._loadMarkersCluster (google-map.js:951:38)
    at PolymerGenerated._initGMap (google-map.js:599:10)
    at PolymerGenerated._mapApiLoaded (google-map.js:606:10)
...

I also tried defining the custom renderer function in a .js file but the function wasn't available within the scope of the map.

Would it be possible to add a small example for the usage of this method to the readme file?

Alternatively, is it possible to inject custom CSS into the component like it would be for a Vaadin component, using e.g. @CssImport(value = "./src/mygooglemap.css", themeFor = "google-map")? That doesn't seem to work for me either.

Thank you in advance for you support!

[mvysny]

I wonder whether you could declare an arrow function, e.g. render: (count, position) => { ... };

[mvysny]

Alternatively, a blind idea: perhaps you can run the following code when the GoogleMap component is added. Create a js file in frontend/ and use @JsModule to import it:

window.my_google_map_renderer = { render: function().... }

then setClusteringRenderer("window.my_google_map_renderer").

[cma-42]

@mvysny Thank you for your suggestions. I could have sworn that I tried both of these things but the additional JS module withwindow.my_google_map_renderer = { render: function().... } did the trick for me and is working as expected 👍

[cma-42]

Apologies for creating this ticket, I had never realized that there were multiple tabs in the demo and one of them covers my question 🤦 https://addonsv24.flowingcode.com/googlemaps/clustering-custom-renderer