Angular-google-maps: Styling the AGM MarkerLabel

[Ashokrlz]

Is there a way to achieve a label like the attached img?

Thanks in advance.

[artipixel]

+1

[abyrne85]

@artipixel Why is this getting downvoted?

[lazarljubenovic]

@abyrne85 The downvote comes from me. It's because writing a comment "+1" serves no purpose and pings people without a reason. If you agree with something and want to see a feature developed or a question answered, you can use the reactions at the top-right of a comment to express those.

[artipixel]

Here we have one of those people who thinks they are better than everyone and can make up rules. Well guess what, you can't. I'm not the first and not the last to comment +1, that is btw pinging people with a very good reason. Who puts you to judge anyway? It's a great feature to ask and people should be notified that others wants it.

[lazarljubenovic]

I'm not making up rules. I'm downvoting a comment. There's no reason to heat up the discussion and spam further.

[SebastianM]

@artipixel for this reason we have the "reaction" feature on Github. +1 comments helps no one

[iamnels1]

you can add your own image to your marker like this :

[MrCroft]

@iamnels1 setting iconUrl doesn't help in cases when you need to use a label.
Ideally the label should also accept css classes for advanced styling.
In the graphic label example that the author of this issue shows, it's the simplest label. But when we use labels instead of plain markers, that's because with plain markers you can't achieve what you need, like for example: (see attached images). The one that looks good is the non-Angular version, plain old site with some JS using Google Maps API directly and we use a 3rd party plugin (MarkerWithLabel). That makes it possible to set an anchor point for the label (so the tip of the pointer falls on the coords) and also add css classes to the label, so we can do padding and other css rules on the label. Actually, we even added the background itself via the css property background-image on the label custom class, that's not an icon url.
Also, you would need to specify an anchor point (based on the size of the label and the arrow/triangle position in the label image) so the pointer you see actually falls in the right spot, since tip of the arrow/triangle needs to point at the coords (and that pointer might not necessarily be bottom/center, you can go "crazy" with label designs)

In an Angular app, with @agm using only iconUrl, it's not possible to make it look like that, since we can't set css properties like padding for example, on that label, and it looks like: (see second screenshot, that doesn't have the text aligned properly)

Properly aligned text in label (easily possible since we can set css classes on the label, using MarkerWIthLabel 3rd party plugin - non-Angular app):

Angular app with @agm, simply using iconUrl. This is the best result I could achieve:

Text can't be properly aligned: right aligned, X pixels from the right (padding-right), Y pixels from the top (padding-top) in order to match this design. It just aligns centred based on the image size it seems. Without the possibility to set a css class on the label (or, at least css properties - but making the label accept css properties as config would only be harder to handle when you need the label to look different across different screen sizes, it's better to accept css classes) there is no way to achieve the needed result.

EDIT: 😄 so, I've just found this: https://www.npmjs.com/package/@ajqua/marker-with-label which shows a <agm-marker-with-label> and it's github link from NPM leads back to this @agm repo. So, it seems to be built for AGM. Will give it a try 😀 It would have been niceer to be part of AGM.
@Ashokrlz did you happen to find this since you opened this issue? I'm guessing you did. But in the 0.1% change that you didn't, this is the example from npm:

<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
  <agm-marker-with-label [latitude]="32.085299899999995" [longitude]="34.781767599999995"
    labelContent="Label marker" labelClass="marker-label-class"
    [labelInBackground]="true" [labelAnchor]="{x: 30, y: -9}"></agm-marker-with-label>
</agm-map>

Using agm-marker-with-label instead of agm-marker should do the trick.
Why didn't I find this before? 😄

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.