Multiple polygons from arrays

I want to draw multiple polygons with lats and longs on one map page this is how i am currently doing


drawingWithcoordinates() {

    var polygons = [];

    var map;

    var bounds = new google.maps.LatLngBounds();

    map = new google.maps.Map(

      document.getElementById("map"), {

      center: new google.maps.LatLng(-34.397, 150.644),

      zoom: 13,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

    this.firestore.collection('locations').doc('3').get().subscribe(data => {

      if (data.exists) {

        this.variable = data;

        console.log(this.variable);

        console.log(this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);

        var custom = [

          new google.maps.LatLng(

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue

          ),

        ];

        polygons.push(new google.maps.Polygon({

          path: custom,

          geodesic: false,

          strokeColor: this.variable.Df.sn.proto.mapValue.fields.color.stringValue,

          strokeOpacity: 1.0,

          strokeWeight: 1,

          map: map

        }));

        map.fitBounds(bounds);

      }

      else {

        console.log('data dont exists');

      }

    })

    this.firestore.collection('locations').doc('8').get().subscribe(data => {

      if (data.exists) {

        this.vareight = data;

        console.log(this.vareight);

        console.log(this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);

        var customeight = [

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lng.doubleValue

          ),

        ];

        polygons.push(new google.maps.Polygon({

          path: customeight,

          geodesic: false,

          strokeOpacity: 1.0,

          strokeWeight: 1,

          map: map

        }));

        map.fitBounds(bounds);

      }

      else {

        console.log('no data for 8 length');

      }

      google.maps.event.addDomListener(window, "load", this.drawingWithcoordinates);

    });

  }drawingWithcoordinates() {
    var polygons = [];
    var map;
    var bounds = new google.maps.LatLngBounds();

    map = new google.maps.Map(
      document.getElementById("map"), {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    this.firestore.collection('locations').doc('3').get().subscribe(data => {
      if (data.exists) {
        this.variable = data;
        console.log(this.variable);
        console.log(this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
        var custom = [
          new google.maps.LatLng(
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
          ),


        ];

        polygons.push(new google.maps.Polygon({
          path: custom,
          geodesic: false,
          strokeColor: this.variable.Df.sn.proto.mapValue.fields.color.stringValue,
          strokeOpacity: 1.0,
          strokeWeight: 1,
          map: map
        }));
        map.fitBounds(bounds);


      }
      else {
        console.log('data dont exists');

      }
    })

    this.firestore.collection('locations').doc('8').get().subscribe(data => {
      if (data.exists) {
        this.vareight = data;
        console.log(this.vareight);
        console.log(this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
        var customeight = [
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lng.doubleValue
          ),

        ];

        polygons.push(new google.maps.Polygon({
          path: customeight,
          geodesic: false,
          strokeOpacity: 1.0,
          strokeWeight: 1,
          map: map
        }));
        map.fitBounds(bounds);
      }
      else {
        console.log('no data for 8 length');

      }
      google.maps.event.addDomListener(window, "load", this.drawingWithcoordinates);
    });

  }