Get data from collection in firestore

Question

I stored geopoints to an array and now I want to output these on google maps but it wont't work. No markers are set for the new geopoints.

Need help, how can I set the markers on map for the geopoints?

firestore database:

code:

   mounted () {

    var map = new google.maps.Map(document.getElementById('mapName'), {
      center: {lat: 0, lng: 0},
      zoom: 20
    });


   fb.usersCollection.where("acctPosition", "==", true).get().then(docs => {
    docs.forEach((coord) => {
     const position = new google.maps.LatLng(coord.latitude,coord.longitude);
     const marker = new google.maps.Marker({
        position,
        map: map
       });
     })
    })
  }

This is the output of console.log(coord.data())

With this geopoints I would like to set a marker in google maps. How to do this?

Answer 1

The following should do the trick:

   fb.usersCollection.get().then(docs => {
    docs.forEach((coord) => {
     const lat = coord.data().acctPosition[0].lat;
     const lng = coord.data().acctPosition[0].lng;
     const position = new google.maps.LatLng(lat, lng);
     const marker = new google.maps.Marker({
        position,
        map: map
       });
     })
    })

docs.forEach() returns a QueryDocumentSnapshot (which "offers the same API surface as a DocumentSnapshot"). You therefore have to call the data() method to get the doc fields.