Chris Chris - 5 months ago 58
AngularJS Question

Custom marker with Angular Google Maps

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

Answer

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