angular-ui/angular-google-maps

Styling agm-marker labels

zolastro opened this issue · 6 comments

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!

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

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

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

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"
	}
});

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