Markers not loading in Google Maps - angularjs

Question

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 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 , lon: marker.longitude};
console.log(loc);
marker = new google.maps.Marker({
position: loc,
map: this.map,
//title:marker.name,
//label:marker.content
});
}

Answer 1

You are accessing non-existing key from marker object. Try to change below function.
addMarkersMap(markers)
{
for(let marker of markers)
{
var loc = {lat: marker.calEvent.locations[0]['coords'].lat , lon: lat: marker.calEvent.locations[0]['coords'].lng};
console.log(loc);
marker = new google.maps.Marker({
position: loc,
map: this.map
});
}
}