Skip to content
This repository has been archived by the owner on Nov 30, 2018. It is now read-only.

Styling agm-marker labels #2021

Open
zolastro opened this issue Oct 9, 2017 · 6 comments
Open

Styling agm-marker labels #2021

zolastro opened this issue Oct 9, 2017 · 6 comments

Comments

@zolastro
Copy link

zolastro commented Oct 9, 2017

Is there a way to style the labels that appear just on top the agm-marker? In my case, I would like to add a shadow to the text, but this doesn't seem to work. If I add the styling for the whole agm-map, I get the desired result, but some text like addresses and street view is also affected.

I've also tried this approach, but it doesn't work either:

agm-marker { text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }

Some suggestions?

Here is part of the actual HTML code that I'm currently using.

<agm-map
    [latitude]="coordinates.latitude"
    [longitude]="coordinates.longitude"
    [zoom]="10">
         <agm-marker
            class="shadow-text"
            *ngFor="let location of pois"
            [markerClickable]="true"
            [latitude]="location.geoLocation.latitude"
            [longitude]="location.geoLocation.longitude"
            [label]="location.title"
     ></agm-marker>
</agm-map>

Thanks!

@karol-depka
Copy link

+1

@karol-depka
Copy link

Mention the styles property of Google Maps? To be implemented in AGM?

@abyrne85
Copy link

Have you figured out how to do this since opening this ticket? I'm having the same issue. Not many styles are supported it seems

image

@zolastro
Copy link
Author

Not yet, if you finally find some way to solve it, let me know please.

@rainergp
Copy link

rainergp commented May 22, 2018

I'm using the new version of the package @agm/core, and I'm able to do something like this:

markers.push({
	latitude: point.latitude,
	longitude: point.longitude,
	url: "./assets/icons/some-icon.svg",
	label: {
		color: '#ffffff',
		fontWeight: 'bold',
		text: "Lorem Ipsum"
	}
});

@shadisafadi
Copy link

I'm using *ngFor in the marker tag, and this worked for me:
[label]="{color: 'white', text: location.title}"

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants