Multiple markers on google map angular 6

If you have not Setup agm map till now then check this post  Google map in angular 6 .

we’ll now use already created MAP to load our markers. Open the file src/app/app.component.ts and modify it like below:

app.component.ts :

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

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
})
export class AppComponent {
    title: string = 'Google Map';
    lat: number = 51.678418;
    lng: number = 7.809007;

    markers = [
        {
            lat: 51.673858,
            lng: 7.815982,
            label: 'A'
        },
        {
            lat: 51.373858,
            lng: 7.215982,
            label: 'B'
        },
        {
            lat: 51.723858,
            lng: 7.895982,
            label: 'C'
        }
    ]
}

Open the file src/app/app.component.html and paste the following content:

Preview:

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

<agm-marker  *ngFor="let marker of markers" [latitude]="marker.lat" 

  [longitude]="marker.lng">

</agm-map>

this will create multiple markers on the map.