4

I want to place a marker on Google Maps using Angular Google Maps my coordinates are from JSON file which when parses in Angular it's become a string.

Angular Google Maps does not support string for coordinates number. So It needs to be number.

marker.json

[  
   {  
      "id":"1",
      "lat":"13.751814",
      "lon":"100.501060"
   },
   {  
      "id":"2",
      "lat":"13.738445",
      "lon":"100.516805"
   },
   {  
      "id":"3",
      "lat":"13.730209",
      "lon":"100.779991"
   }
]

maps.componenet.ts

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {

    private data;

    constructor(private http:Http){
    }

    ngOnInit(){
      this.getData();
    }

    getData(){
        this.http.get('/localhost/marker.json')
            .subscribe(res => this.data = res.json());
    }

}

maps.component.html

<agm-map [latitude]="13.359665" [longitude]="101.035913" [zoom]="6">
    <ng-container *ngFor="let list of data">
        <agm-marker [latitude]="list.lat" [longitude]="list.lon"></agm-marker>
    </ng-container>
</agm-map>

I have tried using parseFloat like this (Yes it's not working)

<agm-marker [latitude]="parseFloat(list.lat)" [longitude]="parseFloat(list.lon)"></agm-marker>

I'm thinking of using parseInt inside maps.component.ts file but I'm not sure where to put this.

May someone helps me or guide me how to solve this.And please let me know that am I providing sufficient information or not.

Thanks!

Improve this question
5
  • 2
    You need to convert it manually, it is default behavior of JSON.parse() Commented May 3, 2018 at 11:46
  • 1
    You can try [latitude]="+list.lat". Commented May 3, 2018 at 11:47
  • 2
    Why does parseFloat not work? Error? Commented May 3, 2018 at 11:48
  • @ConnorsFan Thanks, but it not working. Commented May 3, 2018 at 11:48
  • @Jeff It said parseFloat is not a function (Full error log pastebin.com/8RNSVZ7P) Commented May 3, 2018 at 11:51

3 Answers 3

Reset to default
5

A cleaner and more performant way is to process data once and provide it in view in a way that doesn't need any other preparations:

getData(){
    this.http.get('/localhost/marker.json')
    .map(res => res.json())
    .map((data: any[]) => data.map(
      ({ lon, lat, ...props }) => ({ lon: +lon, lat: +lat, ...props })
    ))
    .subscribe(data => {
      this.data = data;
    });
}

If marker.json doesn't have other props except listed ones, ...props can be replaced with known id property.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks but I got this error Failed to compile. <my-project-path>/maps.component.ts (54,10): Property 'map' does not exist on type 'Observable<Response>'.
Added still have error (Error in my IDE i.imgur.com/wR4CIjN.png)
Then you didn't import the operator. Any observable operator that you use should be imported, like import 'rxjs/add/operator/map'. See stackoverflow.com/questions/45483934/…
I would expect it to work as expected, plnkr.co/edit/XDsezGYihmpolaMHPSAg?p=preview . Consider providing a way to replicate the problem if you have troubles debugging it - Stackblitz, Plunker, etc.
Sure. Consider updating the question or posting a new one if current problem really differs from the one that was originally stated.
|
4

Global functions like parseFloat are not allowed in Angular templates (see the Angular documentation).

You can convert strings to numbers with the + operator:

<agm-marker [latitude]="+list.lat" [longitude]="+list.lon"></agm-marker>

or define a method in your component:

convertCoordinate(str: string): number {
  return parseFloat(str);
}

and call it in the template:

<agm-marker [latitude]="convertCoordinate(list.lat)" [longitude]="convertCoordinate(list.lon)"></agm-marker>
Improve this answer

10 Comments

You could log the data to the console (in the http callback) to see what the strings looks like. Or you could display them with interpolation (e.g. {{list.lat}}) in the template.
By the way, the closing > is missing for the <agm-marker> opening tag in the markup that you show in the question.
Does it work if you add a marker with hard-coded coordinates in the markup? You could also change (or remove) the zoom, to see if it allows to see the markers.
Would it work with <agm-marker [latitude]="'13.359665'" [longitude]="'101.035913'"></agm-marker>? Just to make sure that passing strings really does not work.
One more thing to try: test a hard-coded marker that has exactly the same value as one of the items in your list (as shown in the pastebin). The hard-coded value that you tried is somewhat different, especially for the longitude.
|
0

+lat won't work in Angular template, it's invalid syntax and will throw an error, as well as parseFloat or parseInt, in here you can parse the JSON in the request like @estus pointed out OR you can multiply the string by 1:

<agm-marker [latitude]="list.lat * 1" [longitude]="list.lon * 1"></agm-marker>

This will transform the string into a number but beware that if it's NOT a number there will be error and you won't be able to catch it.

Improve this answer

4 Comments

This would be a nice hack, but no, +lat is valid syntax.
On an HTML template?
Why would lat * 1 be valid but not +lat?
Yes, +lat is valid JS syntax that is recognized by Angular parser, too, plnkr.co/edit/WWn8mkCY9IqZfVMYsr00?p=preview

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.