I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the
labelContent property, setting a class on it via
labelClass and then setting the
icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer