-1

I would like to populate a Google maps with markers.

The marker coordinates I get as String:

"marker": {
      "latitude": "52.31976",
      "longitude": "7.00454"
}

My service for retrieving the JSON:

   /**
     * Get All Sources
    */
    getSources(): Observable<Source.RootObject[]> {
        return this._http.get(this._sourceUrl)
            .map((response: Response) => <Source.RootObject[]>response.json());
    }

My component handling the call:

   /**
     * Set local _sources array equal data from stream
     * @param _sourceService
     * @param router
     */
    constructor(
        private _sourceService: SourceService,
        private router: Router
    ) {
        this._sourceService.getSources()
            .subscribe(_sources => this.createSources(_sources));
    }

The createMArkers method:

 /**
     * Bad workaround for markers
     */
    private createSources(result): void {
        this._sources = result;

        let sourceLat: number, sourceLng: number;
        this.positions = [];
        let latlong = null;

        for (let i = 0; i < this._sources.length; i++) {

            sourceLat = +this._sources[i].marker.latitude;
            sourceLng = +this._sources[i].marker.longitude;
            //  Create position object
            latlong = { lat: sourceLat, lng: sourceLng };

            this.positions.push([this._sources[i].id, latlong]);
        }
    }

The HTML markup with Angular:

<ngui-map zoom="8" center="{{center}}" >

    <marker *ngFor="let pos of positions"
              [icon]="{
               url: 'assets/icons/marker.svg',
               anchor: [16,16],
               size: [32,32],
               scaledSize: [32,32]
             }"
            (click)="printLog(pos)"
            [position]="pos.latlong"></marker>
  </ngui-map>

I would not like to create a seperate array for the positions but just use the array of source objects (e.g. source.marker.longitude)

What I tried:

  • [position]="marker.latitude, marker.longitude" is not accepted because it is a string value.
  • [position]=marker.latitude, marker.longitude with the hope it will be cast.
  • [position]={{marker}}

Thanks in advance.

cartant
  • 57,105
  • 17
  • 163
  • 197
Rafael
  • 788
  • 2
  • 17
  • 38
  • @toskv that' s with TypeScript in the component.ts, but how to solve this with Angular? – Rafael Jul 11 '17 at 13:43
  • 1
    you can just make the conversion with javascript at the same time you process the response from the server. – toskv Jul 11 '17 at 13:45
  • Could you point me in the right direction.. ? – Rafael Jul 11 '17 at 13:46
  • [parseFloat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat)/[parseInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt), or do a numeric operation on it... (but you have to treat each number separately) – geocodezip Jul 11 '17 at 18:32

1 Answers1

0

Try

[position]="+marker.latitude, +marker.longitude"

Basic JS conversion

  • Parser Error: Unexpected token ',' at column 24 in [+marker.latitude, +marker.longitude] [ERROR ->][position]="+marker.latitude, +marker.longitude" – Rafael Jul 11 '17 at 13:41
  • Well it's what you tested with `[position]="marker.latitude, marker.longitude"`, and youy didn't get this error, or you made a mistake in your post ! –  Jul 11 '17 at 13:42
  • Same error, what do you exactly mean? – Rafael Jul 11 '17 at 13:45
  • I took the code from your last lines : `[position]="marker.latitude, marker.longitude"`, which you said you tried and didn't work because of the string value. So I'm asking you, how would you send the data ? –  Jul 11 '17 at 13:48
  • I am getting the coordinates as string values so before or while I use them at the `[position]="...` they must be converted – Rafael Jul 11 '17 at 13:57
  • And what are the arguments to give to `[position]` ? An array of numbers ? An object of numbers ? –  Jul 11 '17 at 13:58
  • array of numbers, as in the coordinates, like LatLng object – Rafael Jul 11 '17 at 14:00
  • then `[position]="{lat: +marker.latitude, lng: +marker.longitude}"` –  Jul 11 '17 at 14:01
  • InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number – Rafael Jul 11 '17 at 14:57