Markers not loading in Google Maps

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:

enter image description here

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:

enter image description here

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

});

}

Source: AngularJS