OverlappingMarkerSpiderfier | overlapping markers in Google Maps JS API v3

I just discovers OverlappingMarkerSpiderfier for Leaflet, and think it could be extremely useful (please note that the Leaflet version offers fewer options than the Google maps version, but I am restricted to Leaflet).

It was the work of only a few minutes to add it an existing project, but I have one tiny problem :-(

When I click any marker from these

I see the markers briefly expand (spiderify), but then the OnClick() of the marker fires (moving me to a new state, showing a new page, without the map).

I guess that I could alter my code to not add an OnClick() handler of the marker, until it expands, then add it, so that only clicking an expanded (spiderified) marker will take the action that is currently taken when clicking on a marker.

My question is whether this is the approach that is generally taken. How do you do it?

Here's my AngularJs code that adds a marker to the map, in case it helps.

I'm having trouble integrating OverlappingMarkerSpiderfier with React-Leaflet and using FeatureGroup for panning on the map. FeatureGroups are really useful when you have complicated panning logic.

Here is a plain JS demo. The markers spiderfy and the pan button works with no issues.

Here is the react-leaflet demo. The panning will fail with the following error if spiderfy is enabled/checked in the UI. This is based on this SO post.

layer.getLatLng is not a function

I think the problem is that with regular JS, I can add the markers array to both oms and the featureGroup imperatively but with React-leaflet, I don't see how I can achieve the same result.

Is the error because layer does not have a getLatLng function for some reason even though I am extending the MapLayer.

I'm unsure of what needs fixing, the JS version seems to work so the OverlappingMarkerSpiderfier library likely doesn't need changes. It could be a React-leaflet specific problem/limitation that can possibly be fixed with a custom FeatureGroup/MapLayer?

I'm implementing github.com/jawj/OverlappingMarkerSpiderfier to make clusters of Pin's on my google map.

What I want to do is to have a i cluster icon with a number in it that tells the user how many pin's there are - Just like google default cluster view. Se screendump. If it's not possible to have a number, that is okay as long as i can set a cluster icon of my choice. Screen shows how clusters looks on google https://developers.google.com/maps/documentation/javascript/marker-clustering

When i click the cluster it opens up and show the pin's. In my case each pin is a small thumbnail. Se screendump Screen shows how it looks after i click the cluster

My problem is that i dont know how to make something like the google cluster solution. My code show a thumbnail as the cluster icon (see screendumb) and i want the 'google solution'. Screen shows how it looks before i click the cluster

-- My script so far --

A previous Q&A provided a great example of what I'm looking to do with a map, but I'm clearly missing something when I integrate portions into my own page, as I keep getting an error thrown and can't see where I'm wrong.

Previous Q&A :

Overlapping Pointers with MarkerClustererPlus and OverlappingMarkerSpiderfier

I'm working on a page for a directional route with waypoints and clustered markers at given distances along the route / polyline. It works great as is, but the icing would be Spiderfied clustered markers.

Here's my code so far :

I'm using leaflet v1.5.1. The error from Chrome is:

leaflet.js:5 Uncaught TypeError: this.callInitHooks is not a function at Object.i [as Marker] (leaflet.js:5) at map1Rose2.php:77

Below is the minimal code that will reproduce the issue in Chrome. I do NOT see an issue with the function. The error appears at the first 'var' (line 77) in the . I've prodded and poked at this thing to exhaustion does anyone have an idea?

We have an L.map with various layers of L.markers loading from a dynamic array of events spanning a monthly period. Many of the listed venues hold numerous events during any given period and hence we end up with numerous markers sharing locations that are very nicely spiderfied using the OMS-Leaflet plugin (0.2.6) we run from CDN

Each marker is put into one of several marker Layers depending on day of week or whether the event has been confirmed / expires e.g. here is one that falls on a weekend: