Marker icon display bugs when setting maxZoom with custom icons

[StanIsAdmin]

This issue was already posted on the "official" ;) repo, before I realized this one was the one being maintained. Sorry if copy-pasting the issue here is not what I should have done, I'm new to this.

I have a google map where I create markers with custom icons, and there are hundreds of these icons.
I'd like not to cluster them when zooming beyond a certain level, so I tried using the maxZoom option (I have tried values 14, 15 and 16).

Whenever I create multiple markers close to each other at high zoom levels then zoom in and out, graphical bugs start appearing.
So far, here are the bugs I've seen:

• One or more (sometimes all) markers adopt the same icon, always one of the original icons used for one of the markers
• Icons do not appear whole
• Icons are shown multiple times
• Any combination of the above

I should state that I have no problem whatsoever whenever I simply do not set the maxZoom option.

Here is an example of such a bug (I had to add a marker for the last one to happen) :

In addition, I've noticed a strange behavior that may be linked : whenever i zoom in just enough to de-cluster a cluster (for example by clicking on said cluster), all of the icons appear the same (this happens without the maxZoom option as well).

Any help solving this would be greatly appreciated, thanks for all the hard work and support 👍

[Remo]

Do you have a jsfiddle or something we can play around with so that we don't have to create a map with funny animals ourselves? Thanks ;-)

[StanIsAdmin]

Unfortunately I use the JavaScript API from a JavaFX project with a WebView component. If that's what it will take I can try to make a jsfiddle out of it but it may take some time (I'm not much of a webpage guy).

[Remo]

Well, even if you're using JavaFX, there's a website in the WebView, isn't there? Can't you just save that and upload it somewhere?

[StanIsAdmin]

Sure, here's a jsfiddle of the webpage loaded by the WebView. You won't be able to add markers though since all of the callbacks are linked to java code through a Java bridge class.

I can't seem to add the images I use as icons in the jsfiddle, but they were all downloaded from here

[Remo]

That fiddle doesn't seem to work at all, image path can be set thorugh imagePath, but there's a lot more broken in your example. I'd be happy to have a look if you can help me with a working example, but my time is currently pretty limited..

[StanIsAdmin]

I perfectly understand, I'll try to work out how to provide a working example you can directly interact with, and post it here when it's done.

[StanIsAdmin]

Here's a stripped-down, working version of the code I use in my project. Right-clicking on the map adds a marker with one of four possible images (the ones I first discovered the bug with).
Yet none of the mentioned bugs appear.
The main differences with my original code are :

• this code is not being executed in a WebView, but rather in a browser (Chrome)
• these images are not local, but instead served through https

If the bug is related to the images being used locally, or to the WebView environment, I guess there will be no easy way of providing a working example.

[Remo]

did you try to put the jsfiddle in your webview? That way we could easily verify whether it's a problem related to the webview.

[Remo]

@StanIsAdmin I'm going to close this as it doesn't seem to be related to the JavaScript code in this repo. If you manage to reproduce this outside of your JavaFX project, please let me know and I'd be happy to have a look, but as long as it's just happening in your custom environment I can only assume, it's a problem found there.