Cluster markers are missing when used in JS

[MoritzLost]

I'm building a map that's initialized in JS. As per the documentation, passing { cluster: true } in the options is supposed to activate clustering using the default markers. However, the JS code doesn't know the location of the default marker cluster icons, so it can't load them.

I checked the network tab, if no cluster marker path is specified, it tries to load the images from /images/m1.png, which of course doesn't exist. At least in the source code, there's supposed to be a default cluster marker path, but I checked in the debugger and googleMaps._defaultClusterPath is always undefined.

I was able to make it work by manually publishing the folder with the cluster markers and specifying the path in my JS code:

{% set clusterImagePath = craft.app.assetManager.getPublishedUrl('@doublesecretagency/googlemaps/resources/images/clustering', true) ~ '/m' %}

{% js at head %}
    window.OfferMapSettings = {
        clusterImagePath: "{{ clusterImagePath|json_encode|e('js') }}",
    }
{% endjs %}

const mapOptions = {
    cluster: {
        imagePath: JSON.parse(window.OfferMapSettings.clusterImagePath),
    },
}

But that's pretty involved, maybe the plugin should take care of this by default. Or am I missing some initialization step that I'm supposed to execute in Twig before those defaults become available in JS?

[lindseydiloreto]

Good catch. It seems this was mostly a shortcoming of the docs, which failed to mention a critical point. It was presumed that you were manually loading the JS assets, like so...

{% do googleMaps.loadAssets() %}

If you load the JS assets like this, your googleMaps._defaultClusterPath value will be set properly. You shouldn't need to manually adjust it.

The plugin has a set of required JS assets which must be loaded for any dynamic map to function. If those assets aren't loaded automatically, they must instead be loaded manually.

I'll update the docs to explicitly mention googleMaps.loadAssets() for JS-only maps. Thanks for the heads up! 👍

[lindseydiloreto]

Done. I strengthened the messaging around manually loading the required JS assets...

• Clustering Markers > Basic Clustering
• Required JS Assets > Loaded Automatically

Hope that helps!

[MoritzLost]

@lindseydiloreto Thanks for the reply and the update!
I was using GoogleMaps::getAssets instead of GoogleMaps::loadAssets, I didn't catch that loadAssets also publishes the the resources folder and adds that setting.

The problem is, I can't use loadAssets because we have to comply with the GDPR, so we can only load Google Maps JS assets after explicit user consent. We're using klaro to manage user consent, so we load the Google Maps JS assets like this:

$assets = GoogleMaps::getAssets([
    'language' => 'de',
    'region' => 'DE',
]);
foreach ($assets as $index => $asset) {
    Craft::$app->view->registerJsFile('#', [
        'position' => View::POS_HEAD,
        'src' => '',
        'type' => 'text/plain',
        'data-name' => "GoogleMaps",
        'data-src' => $asset,
        'data-type' => 'application/javascript',
    ], "google-maps-asset-{$index}");
}

Would you mind separating the part of the loadAssets method that publishes the resources folder and sets the default cluster image into a separate method? Then I could just call that in addition to loading the assets as seen above and wouldn't have to register the default cluster images manually.

[lindseydiloreto]

Interesting point... I'll take a closer look at the implications of moving that.

[lindseydiloreto]

Per #39, the underlying marker clustering library has been replaced.

The new clustering library relies on internal SVGs to render the default marker. There is no longer a need for this plugin to have a _defaultClusterPath, nor default PNG files.

So after replacing the marker clustering library, this issue has become entirely moot. Thanks! 👍