CODEWITHSUNDEEP
angular5angular-google-maps
Максим Попов
Максим Попов

Reputation: 61

How to style agm-marker label

How to styling agm-marker-label - max-width for set text to center ? I can change label position but can't set min-width for centralization label name.

<agm-marker *ngIf="school.lat && school.lng" 
                    [iconUrl]="{url: school.mapMarker, scaledSize: {height: 75,width: 48},labelOrigin:{x:70,y:20}}"
                    [label]="{text:school.schoolName}"
                    [longitude]="school.lng | parseFloat"
                    [latitude]="school.lat | parseFloat">
        </agm-marker>

Upvotes: 6

Views: 18206

Answers (5)

Md Rehan
Md Rehan

Reputation: 353

Use this code in style.css or style.scss file and from this you can style agm-marker label

::ng-deep .gm-style div[aria-hidden = "true"] {
    background-color: #393939 !important;
    color:#fff !important;
    padding: 5px;
    margin-left: 10px;
    border-radius: 5px;
}

Upvotes: 0

Ranjit Joshi
Ranjit Joshi

Reputation: 91

Works for me

    <ng-containner *ngFor="let data of zones" >
                    <agm-marker [latitude]="data.latitude" [longitude]="data.longitude" [opacity]="(data?.hover)? 1 : 0.4" [label]="{fontSize: '12px',fontWeight: 'bold',text: ((data?.hover)? (data.name | titlecase) : null)}"></agm-marker>
                    <agm-circle [latitude]="data.latitude" [longitude]="data.longitude" [circleDraggable]="false" [editable]="false" [fillColor]="(data?.hover)? '#04397f' : data?.color" [radius]="data.radius" [strokeColor]="data.status == 'inactive' ? 'grey' : 'blue'" [strokeWeight]="2"></agm-circle>
    <ng-containner>

Upvotes: 1

YASH GAUTAMI
YASH GAUTAMI

Reputation: 683

Simple style tag works for me:

    <agm-map style="text-shadow: 0px 0px 6.2px grey;"(mapReady)="onMapReady($event)" #map (mapClick)="mapClicked($event)" [scrollwheel]="mapScWheel"
                                 [latitude]="center?.lat" [longitude]="center?.lng" [styles]="styleArray"
                                 [keyboardShortcuts]="true" [usePanning]="true" [fullscreenControl]="true"
                                 [style.height.px]="getMapHeight()" [clickableIcons]="false"
                                 [zoomControl]=true [zoom]="mapZoom">
                            <agm-marker *ngFor="let device of devices"
                                    [label]="device?.labelOptions"
                                    [iconUrl]="{url: device.iconUrl,labelOrigin:{x:22.5,y:20}, scaledSize: {height: 45,width: 45}}"
                                    [latitude]="device?.latitude"
                                    [longitude]="device?.longitude"
                                    class="agm-marker">
                            </agm-marker>
   </agm-map>

Upvotes: 2

Shadi S
Shadi S

Reputation: 116

using 2 [label] attributes didn't work for me. Instead the following worked:

<agm-marker
        *ngFor="let sp of mySPlist"
        [latitude]="sp.geoLat" [longitude]="sp.geoLon"
        [iconUrl]="sp.icon"
        [label]="{color: 'white', text: sp.name}"
      >
</agm-marker>

Upvotes: 9

Mason SB
Mason SB

Reputation: 523

If this helps anyone... This is the only thing I have found that works.... put [label]="labelOptions" in your marker, and then in the ts file define the css like so...

labelOptions = {
    color: 'white',
    fontFamily: '',
    fontSize: '14px',
    fontWeight: 'bold',
    text: "some text"
}


<agm-marker  *ngFor="let data of serviceProvider; let i = index" [latitude]="data.Geolocation__c.latitude" [longitude]="data.Geolocation__c.longitude" [label]="labelOptions" [label]="{i+1}"> 
    <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
        <ng-template>
            {{ i+1}}
        </ng-template>
    </agm-snazzy-info-window>
</agm-marker>
</agm-map><br/>

Upvotes: 3

Related Questions