Loading markers from a JSON file on Google Maps

Ionic Framework ionic-v3
1

Hi, I am new to Ionic/Angular as a framework in general and want to try and learn how to display markers on a map from a JSON file. I have followed an online tutorial to load a Google Maps API on my Ionic platform. So at the moment I only have a map loading with one marker. If anyone can help inform me how I should go about achieving my goal it would be greatly appreciated.

the JSON feed (it’s long): http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

My map functionality currently to display map with marker:

home.html:

<ion-content>
 <div #map id="map"></div>
<p>

</p>
</ion-content>

home.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

 @ViewChild('map') mapRef: ElementRef;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){
 this.showMap();

}

showMap(){

 //location - lat long
 const location = new google.maps.LatLng(51.507351, -0.127758);

  const options ={
  center: location,
  zoom: 10

   }

   const map = new google.maps.Map(this.mapRef.nativeElement, options);

   this.addMarker(location, map);
 }


addMarker(position, map) {

return new google.maps.Marker({
  position,
  map
});
}
}