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:


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 :

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


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:

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

  this.http.get(' limit=500').map((res)=>res.json()).subscribe(data=>{


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

  marker = new google.maps.Marker({
  position: loc,



Source: AngularJS