search

fawmi / vue-google-maps

Reactive Vue 3 components for Google maps
https://vue-map.netlify.app
MIT License
196 stars 101 forks source link

Cluster markers doesn't find an image (circle symbols don't show up) #101

Open mprzez opened 2 years ago

mprzez commented 2 years ago

Cluster markers symbols don't display, there are only numbers displaying, images are not found

Steps to reproduce the behavior:

  1. Open map with markers
  2. Zoom out to cluster markers
  3. See error - only numbers of items are display, there are no circle symbols

Expected behavior Cirlce symbols should display

Screenshots Firefox 98.0 obraz

Chrome 99.0.048 obraz

Desktop (please complete the following information): Windows 10 Firefox 98.0 Chrome 99.0.4844.51

eric-schmidt commented 2 years ago

I can confirm this issue as well, but have not yet been able to troubleshoot further.

asdrubalp9 commented 2 years ago

confirming issue, I'm trying to add my own icon parsing the styles prop as :styles="['images/clusterIcon.png']" and it doesn't show the icon. also, tried :styles="'images/clusterIcon.png'" it gave an error that it was expecting an array and got a string, but the format or anything isn't specified in the docs.

fixed it by creating my own icon in photopea and saving it in images/m2.png

btw I'm using quasar and brave browser.

34fame commented 2 years ago

Same problem here on v0.9.67.

I tried installing v0.9.3 because that is what's running in StackBlitz example and the images work there; however I get an export error from the "marker-clusterer-plus" package.

Based on what @asdrubalp9 mentioned, I copied images I found in node_modules/marker-clusterer-plus/images to public/images. Then I re-installed v0.9.67 and the cluster images are working.

Also using Quasar! =)

eric-schmidt commented 2 years ago

For anyone that needs it, the solve in this issue worked for me; however, I did have to add some custom styling to re-center the cluster number within the icon 👍