Loading markers from a JSON file on Google Maps


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:


 <div #map id="map"></div>



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

declare var google: any;

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

 @ViewChild('map') mapRef: ElementRef;

constructor(public navCtrl: NavController) {





 //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({