Angular 2+ Google Maps component does not show dynamic dots

Question

Angular 2+ Google Maps component does not show dynamic dots

Navigation

#1 by (1 votes)

1

I'm trying to implement a map In angular 2 with the Google maps component but I have problems wanting to show several points dynamically

I attached the code (simulating more or less what I want to do)

first I create an array with the points

  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);

  }

from the html command to call the function with a button

<button type="submit" class="btn btn-primary" (click)="agregarpuntos()">Ver</button>

and on the html map

<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>

but it does not show no point just the map

What am I doing wrong?

as extra data and import in 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 { }

As an extra I do not know if it matters or not but if I put the lat and long manually if it works

angular

asked by Wilfredo Aleman 27.11.2017 в 16:48

source

1 answer

How to use a sharePreferences with a tableLayout Browse array 1 dimension, intermediate code (3 addresses) C ++

score 1 · Accepted Answer

After investigating stackoverflow in English

I found a comment that said that I should convert the longitude and latitude to number since when sending them from a service they came as string

Implement a function to convert from string to number

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

in the html the implement

             
            <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>