I am able to load markers from a local database I include in my Ionic app that is just a simple array of lat/lon coords. The trouble is when I try and load them from a JSON file on the web. Any help would be appreciated. Thanks!

this is the call I use:

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


And that all works fine for populating the map from a local data file.

Now my issue is that I would like to display markers from a JSON file that is located at :

http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

Although when I change the get request to include that link as such:

get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500')


It gives me the following error message:

I believe I am not parsing the coords correctly in my marker function, yet I am unsure how to do this with the JSON array. Here is a visual of what the location structure looks like in the file:

My home.ts marker map/marker functionality:

displayGoogleMap(){
let mapOptions = {
center:latLng,
zoom:12,
}
}

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

});
}

for(let marker of markers){
var loc = {lat: marker.latitude , lon: marker.longitude};

console.log(loc);