Possible to add HTML to markers?

[jvv]

I've been playing around with vue-google-maps, and really enjoy it. There is one thing that so far I have not been able to get working, which is adding some HTML string to the marker object. The reason I'd like to have some HTML in the marker is so I can use icon fonts and (in some cases) add numbers to the marker.

I've tried the MarkerLabel, but this only allows 1 character, which unfortunately isn't enough :-)

To achieve this before I used vue-google-maps I tried CustomMarker (http://humaan.com/custom-html-markers-google-maps/) and MarkerWithLabel (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html) - both did the trick.

Is there a way to send some HTML to the marker object? As in: am I missing something?

[GuillaumeLeclerc]

Can you give me an example of what you want to achieve. I'm not shure what you mean by HTML markers

[jvv]

I have to work with a dynamic set of categories for points of interests. In the data I'm getting I have references to material-design-icons (https://design.google.com/icons/) or a custom generated font icon set. At the moment I could ask our designer to create a marker for each category, but this isn't really sustainable as the category count most likely will increase. Besides the custom icon I'd like to have on top of the marker there are cases where it would be nice to show a number on each marker - indicating the order a user should follow the markers on the map.

With the CustomMarker lib I referenced in opening post I could get markers to show up like this in the rendered source:

<div class="marker poi_lib_3662588" style="position: absolute; cursor: pointer; width: 50px; height: 69px; left: 799.029px; top: 372.843px; background-image: url('/marker/7CC9E9/ffffff.svg');">
    <div class="marker_inner">
        <i class="icon_poi_sights custom_poi marker_icon" style="font-size: 100%; "></i>
    </div>
</div>

By creating a marker object as such and pushing it to the map:

new CustomMarker(
    ltln,
    Map7.map,
    {
        id: place.id,
        place_obj : place,
        title : String(place.name),
        markerClass : type,
        iconClass: markerIconClass,
        marker_color: markerColor
    }
)

An example can be seen on: http://app.mechelen.be/ - which I hope helps clarifying this a bit. Is there anything else I haven't made clear?

[jvv]

An other reason I like this setup is that I can change the marker color through css (when using svg images).

[GuillaumeLeclerc]

Ok I understood the problem. So we would need a new component CustomMarker. Which is in fact an overlay. It would be a very different component since for example it would not work with bound InfoWindows.

It may require a good amount of work. Would you like to try it. I'm not sure I will have enough time next weeks since I'm preparing a job interview at Google right now.

[jvv]

I'd like to give it a shot - for now (as I have deadlines ;-)) I asked the designer to create svg markers for each icon - but I still am in need of a proper way to achieve the above. Good luck with your job interview! I'll keep you updated on the what & when.

[francisortega]

I too would like to know how this would work. Please keep us updated.

[jvv]

I hope to find some time next month for this :)

[jvv]

So, I finally had a little time to work on this - I managed to something working - but I doubt this is up to @GuillaumeLeclerc code standards (as in - I checked other components and this code doesn't come anyway near it ;-))

Preview can be seen on http://joost.work/richmarker/ (couldn't get it to work in jsfiddle). Want to continue to work on this - but have some other deadlines - and hopefully I'll get it to work as a component after which I can send a PR.

the 9 markers on top of each other all have the same lat/lng - but a different anchor point (bottom_left / top_right and so on)

[bbflame]

wrong link(

[bbflame]

Can i update link?