angular-google-map add text under each marker

Question

app.component.html

    <h1 *ngFor="let m of markers;">{{ m.lat }}</h1>


    <agm-map [latitude]="lat" [longitude]="lng" [styles]="styles">

        <agm-marker *ngFor="let m of markers;let i = index"
            [latitude]="m.lat"
            [longitude]="m.lng"
            [label]="m.label"
            [animation]="'DROP'" 
            [iconUrl]="'favicon.ico'"       
            >
        </agm-marker>
    </agm-map>

ap.component.ts

    import { Component } from '@angular/core';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    markers: any[] = [
        {
        lat: 12.971599,
        lng: 77.594566,
        label: 'A',
        draggable: false
        },
        {
        lat: 12.671599,
        lng: 77.894566,
        label: 'B',
        draggable: false
        },
        {
        lat: 12.771599,
        lng: 77.564566,
        label: 'C',
        draggable: false
        },
        {
        lat: 12.771599,
        lng: 77.424566,
        label: 'D',
        draggable: true
        }
    ]

    styles = [{
        featureType: 'poi',
        elementType: 'labels.text.fill',
        // stylers: [{color: '#0099ff'}]
    }
    ];


    title: string = 'My first AGM project';
    lat: number = 12.971599;
    lng: number = 77.594566;

    getMapData(event){
        console.log(event)
    }

    }

Here i have shared my template and component.

How can i share some text for each markers.(text can be bottom or side to each marker).

Please if any idea how can we do this.

Angular 4 Google Maps how to add description to marker

I checked this answer but, that didn't work for me.

Answer 1

To customize styling the following properties for label could be specified:

export interface MarkerLabel {
  color: string;
  fontFamily: string;
  fontSize: string;
  fontWeight: string;
  text: string;
}

Marker label could be positioned via iconUrl property by specifying Icon.scaledSize value like this:

<agm-marker *ngFor="let loc of locations" [label]="loc.label" [latitude]="loc.lat" [longitude]="loc.lng" [iconUrl]="icon" >
</agm-marker>

where

icon = {
    labelOrigin: { x: 16, y: 48 },
    url: "http://maps.google.com/mapfiles/kml/paddle/red-blank.png",
};

Here is a demo