Not a LatLng or LatLngLiteral: in property lat: not a number

Ionic Framework ionic-v3
1

Hi guys, I am trying to display markers form a JSON file and am encountering this error right now:

58 PM
Screen Shot 2017-10-24 at 8.18.58 PM.png1116×1132 180 KB

The map loads fine though and I can see my parsed array of objects in the developer window.

If someone can suggest how I can properly get the coords from the array so the markers will display that would be wonderful.

Here is the JSON: http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

It seems as though its within calEvents.locations.coords yet I am unsure how to parse this in the function.

here is my home.ts marker functionality:

displayGoogleMap(){
let latLng = new google.maps.LatLng(43.653908,-79.384293);
let mapOptions = {
center:latLng,
zoom:12,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}


getMarkers(){
//this.http.get('assets/data/markers.json').map((res)=>res.json()).subscribe(data=>{
this.http.get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500').map((res)=>res.json()).subscribe(data=>{
this.addMarkersMap(data);

});
}

addMarkersMap(markers){
for(let marker of markers){
  var loc = {lat: marker.latitude , lng: marker.longitude};
 
  console.log(loc);
  marker = new google.maps.Marker({
  position: loc,
  map: this.map,
  title:marker.name,
  label:marker.content

});

}
}

Any help is appreciated. Thanks!

2

@abpatola what is your server running on, Windows or Linux?
In any case, it seems your web server does NOT understand unicode nor UTF-8 simple character translations. Can you check in your files or webserver?

I elaborate, most apache, php, mysql versions nowadays need utf-8, to make simple operations like multiply, divisions etc…

Hope it helps a bit,

FrancoisIonic

3

I am using a Mac and launching in Chrome

4

I just want the lats and langs from the array of objects in the JSON file to display. It works fine displaying them from a sample array in a database locally… just not with this JSON.

I can use

get('assets/data/markers.json')

for example and it will display markers from that file that has lats and longs listed in a simple array. So I figure I am not passing the coords in correctly from that JSON file…

5

@abpatola then try the Ionic way to unfold a xml file, then process it:

makeGetRequest() {
this.http.get('http://www.gazetaexpress.com/rss/sport/?xml=1').map(res => {
let posts = res.json();
xml2js.parseString(posts, ((result) => {
console.log(result);
return result;
}));
}).subscribe(
(data) => console.log(data),
(err) => console.log(err)
);

map==>res() something like this example above.

Have fun with Ionic,

6

it is a JSON file though…

7

then go look at ionic docs, it’s x10 easier to grab and retrieve data from it.

8

I have looked at the docs and unfortunately I can only have a JSON file

9

I don’t understand sorry, xml is not good, then json is not enough. Be precise in question please :slight_smile: