Click here to Skip to main content
15,851,335 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
i create an array in .ts file , but when i try to run ngFor loop on that array it not working in <agm marker="">


following is my .ts file

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

@Component({
    selector: 'app-marker-list',
    templateUrl: './marker-list.component.html',
    styleUrls: ['./marker-list.component.css']
})
export class MarkerListComponent implements OnInit {
    lat: number = 18.955113;
    lng: number = 72.813758;
    markerList: Marker[] = [];
    
    constructor() {
       this.markerList = [
            { lat: 51.678418, lng: 7.809007 },
            { lat: 18.955113, lng: 72.813758 },
            { lat: 18.954793, lng: 72.814246 },
            { lat: 18.954204, lng: 72.815055 },
            { lat: 18.95314,  lng: 72.815982 },
            { lat: 18.952091, lng: 72.816912 },
            { lat: 18.950728, lng: 72.818209 },
            { lat: 18.948541, lng: 72.820011 },
            { lat: 18.946867, lng: 72.821399 },
            { lat: 18.942403, lng: 72.823517 },
            { lat: 18.9392,   lng: 72.824119 },
            { lat: 18.936472, lng: 72.824151 },
            { lat: 18.933324, lng: 72.82397 },
            { lat: 18.933025, lng: 72.827109 },
            { lat: 18.932812, lng: 72.828343 },
            { lat: 18.932625, lng: 72.830708 },
            { lat: 18.932168, lng: 72.834165 },
            { lat: 18.932473, lng: 72.835184 },
            { lat: 18.93157,  lng: 72.835495 },
            { lat: 18.929984, lng: 72.834939 },
            { lat: 18.928633, lng: 72.83424 },
            { lat: 18.927237, lng: 72.833958 },
            { lat: 18.92677,  lng: 72.833454 },
            { lat: 18.927704, lng: 72.832035 },
            { lat: 18.927095, lng: 72.831498 }
            
        ];
        console.log(this.markerList);
         
    }

    ngOnInit() {
    }

}
class Marker {
    lat: number;
    lng: number;
}



---- html ------

<agm-map [latitude]="lat" [longitude]="lng" minZoom="0" maxZoom="20" [fullscreenControl]="false"
    [streetViewControl]="false" [zoomControl]="false">
    <agm-marker *ngFor="let marker of markerList" [latitude]="marker.lat"
          [longitude]="marker.lng">
        <agm-info-window>Hello World</agm-info-window>
    </agm-marker>
</agm-map>


What I have tried:

i tired everything,search it on google and everything but code is not working can anybody help me in this
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900