Показывать маркеры мултипл на карте от Cloud Firestore

Question

Я настраиваю новое угловое приложение и хочу показать маркеры на моей существующей карте mapbox.Связь с firebase уже установлена, но с моим текущим кодом я не вижу никаких маркеров.

Консоль показывает мне: this.markers.subscribe не является функцией

map.component.ts

import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import { Map, GeolocateControl, LngLat, LngLatBounds } from "mapbox-gl"
import { MapService } from '../../services/map.service';
import { GeoJson, FeatureCollection } from '../../models/map';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit {

  // default settings
  map: mapboxgl.Map;
  style = 'mapbox://styles/mapbox/light-v9';
  lat = 50.530;
  lng = 8.5;
  message = 'Hello Message';

  // data
  markers: any;
  source: any;

  constructor(private mapService: MapService) { }

  ngOnInit() {
    this.markers = this.mapService.getMarkers()
    this.initializeMap()
  }

  private initializeMap() {
    // locate the visitor
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.lat = position.coords.latitude
        this.lng = position.coords.longitude
        this.map.flyTo({
          center: [this.lng, this.lat]
        })
      })
    }
    this.buildMap()
  }

  buildMap() {
    this.map = new mapboxgl.Map({
      container: 'map',
      zoom: 13,
      style: this.style,
      center: [this.lng, this.lat],
    })

    this.map.addControl(new mapboxgl.NavigationControl());

    let geolocateControl = new GeolocateControl({
      positionOptions: { enableHighAccuracy: true },
      watchPosition: false
    })

    this.map.on('load', (e) => {
      // register the source
      this.map.addSource('firebase', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: []
        }
      })

      this.source = this.map.getSource('firebase')

      this.markers.subscribe(markers => {
        let data = new FeatureCollection(markers)
        this.source.setData(data)
      })

      this.map.addLayer({
        id: 'firebase',
        source: 'firebase',
        type: 'symbol',
        layout: {
          'text-field': '{message}',
          'text-size': 24,
          'text-transform': 'uppercase',
          'icon-image': 'rocket-15',
          'text-offset': [0, 1.5]
        },
        paint: {
          'text-color': '#f16624',
          'text-halo-color': '#fff',
          'text-halo-width': 2
        }
      })

      geolocateControl.on('geolocate', (event) => {
        this.flyTo(new GeoJson([event.coordinates.lng, event.coordinates.lat], { message: 'You' }))
        this.populatePickupLocation([event.coordinates.lng, event.coordinates.lat])
      })

    }) 
  }


  flyTo(data: GeoJson) {
    this.map.flyTo({
      center: data.geometry.coordinates,
      zoom: 13
    })
  }
}

map.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { environment } from '../../environments/environment';

import { Observable } from 'rxjs/Observable';
import { GeoJson } from '../models/map';

import * as mapboxgl from 'mapbox-gl';
import { Map, Marker, LngLat }  from "mapbox-gl";

@Injectable()
export class MapService {
  map: Map

  constructor(public db: AngularFirestore) {
    mapboxgl.accessToken = environment.mapbox.accessToken,
    this.markers = this.db.collection('markers').valueChanges();
  }

  getMarkers(): Observable<any> {
    return this.db.collection('/markers')
  }

  createMarker(data:GeoJson) {
    return this.db.collection('/markers')
    .push[(data)]
  }

}

Структура в моей базе данных:

-markers
--id
---coordinates
----lat
----lng
---type

Я не могу объяснить, где проблема.Кто-нибудь еще?