showing marker labels using angular google maps directive

Question

I'm trying to understand how to make the markers directive show labels using angular UI google maps directive.

If you look at this plunkr which is almost identical to the angular ui google maps example, except for the following change:

        <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'"
        options="{labelClass:'marker_labels',labelAnchor:'12 60',labelContent:'title'}"
        >
        </ui-gmap-markers>

(the options part is my sole addition)

you will see that it is showing labels, but they all show up as the string "title", whereas my intention was to show the actual title which is obviously unique per marker and is a property of the marker model.

Any idea how to make this work?

Answer 1

The options attribute of the ui-gmap-markers directive can also be the name of your marker dependend options sections (see section "markers").

So just put your options

{labelClass:'marker_labels',labelAnchor:'12 60',labelContent:'title'}

into your marker model under some key (exchanging the labelContent by something dynamic of course) and provide the name of this key in the options attribute of the ui-gmap-markers directive.

Please see your modified plunkr here.