1

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

1 respuesta 1

1

Despues de investigar en stackoverflow en ingles

encontré un comentario que decia que debia convertir la longitud y latitud a numero ya que al enviarlos desde un servicie estos venían como string

impletemente una funcion para convertir de string a numero

  private convertStringToNumber(value: string): number {
    return +value;
  }

en el html la implemento

             
            <agm-map [latitude]="lat" [longitude]="lng" [zoom]="10" >
                  <agm-marker *ngFor="let cliente of listapuntos" [latitude]="convertStringToNumber(cliente.lat)" [longitude]="convertStringToNumber(cliente.long)"></agm-marker>
            </agm-map>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.