Angular-google-maps: How to change angular 2 google map marker label color?

Created on 26 Sep 2017 · 12Comments · Source: SebastianM/angular-google-maps

Issue description
hello I am using Angular2 Google Maps and i want change my maker label color

code :

<agm-map [zoom]="7" [latitude]="lat" [longitude]="lng" [styles]='[
            {
                elementType : "labels.text",
                stylers : [{
                   color:"#ffffff"
                }]
            }]'> <agm-marker>....</agm-marke>

but its set google default label color
please help me ...

Source

snd1890

Most helpful comment

You can modify the colour of the marker but passing in properties into the marker itself.

[label]="labelOptions"

TS:

labelOptions = {
color: '#CC0000',
fontFamily: '',
fontSize: '14px',
fontWeight: 'bold',
text: 'Some Text',
}

MattPua on 27 Sep 2017

👎9 👍8 ❤1 🎉1

All 12 comments

You can modify the colour of the marker but passing in properties into the marker itself.

[label]="labelOptions"

TS:

labelOptions = {
color: '#CC0000',
fontFamily: '',
fontSize: '14px',
fontWeight: 'bold',
text: 'Some Text',
}

MattPua on 27 Sep 2017

👎9 👍8 ❤1 🎉1

@MattPua hello your code working but problem is here

label text is dynamic from for loop.... how to set text from for loop

snd1890 on 28 Sep 2017

solved by change css : .gm-style div{color: #fff !important; font-weight: bold;}

snd1890 on 28 Sep 2017

@snd1890
Can you share "...." , i want edit icon same you ,thanks!!

nguyendpc on 29 Sep 2017

@MattPua - It would be great if you can share how to change the label background color? Like this.

markerlabel

Ashokrlz on 4 Nov 2017

👍6

If we could also change the position that would be great. A few styles are ignored - backgroundColor and marginTop specifically.

Alternatively, give the div a class name so we can access it with CSS

abyrne85 on 22 Dec 2017

@Ashokrlz did you find out how to make that change?

almcaffee on 30 Dec 2017

Anyone has idea how to change marker image?

thought2tech on 3 Jan 2018

I'm using https://developers.google.com/chart/image/docs/gallery/dynamic_icons#icon_types. So just use [iconUrl] param and change it on hover to the icon with text for example like I did

Viktor-Bredihin on 18 Jan 2018

👍3

You can use the answer from @MattPua and send a dynamic text, like this:

[label]="{
    color: '#ffffff',
    fontWeight: 'bold',
    text: (i + 1).toString()
}"

pgqueme on 24 Feb 2018

👍4

@Viktor-Bredihin Could you give an example of how you achieved this?

abyrne85 on 27 Feb 2018

this simple style works for me to style agm marker label
<agm-map style="text-shadow: 0px 0px 6.2px grey;"> <agm-marker *ngFor="let device of devices" [label]="'anything'"></agm-marker> </agm-map>