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.