Estoy intentando implementar un mapa En angular 2 con el componente Google maps pero tengo problemas al querer mostrar varios puntos dinamicamente
les ajunto el codigo ( simulando mas o menos lo que quiero hacer )
- primero creo un array con los puntos
agregarpuntos(){
let val= {
lat : "14.048128",
long :"-87.1973873"
}
let val1 = {
lat: "14.0480916",
long: "-87.1977186"
}
let val2 = {
lat: "14.0484597",
long: "-87.1988568"
}
let val3 = {
lat: "14.0497273",
long: "-87.1991785"
}
let val4 = {
lat: "14.0508924",
long: "-87.2028268"
}
this.listapuntos.push(val);
this.listapuntos.push(val1);
this.listapuntos.push(val2);
this.listapuntos.push(val3);
this.listapuntos.push(val4);
console.log(this.listapuntos);
}
desde el html mando a llamar la funcion con un boton
<button type="submit" class="btn btn-primary" (click)="agregarpuntos()">Ver</button>
y en el mapa html
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="15" >
<div *ngFor="let cliente of listapuntos">
<agm-marker [latitude]="cliente.lat" [longitude]="cliente.long"></agm-marker>
</div>
</agm-map>
pero no me muestra ningún punto solo el mapa
que estoy haciendo mal ?
como datos extra ya importe en app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
AgmCoreModule.forRoot({
apiKey: 'Aqui esta mi apikey'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
como extra no se si importa o no pero si coloco la lat y long manualmente si funciona