Untitled

addAllMarkersFromAPI() {

    // MARKERY POBIERANE Z BAZY NIE MAJĄ LISTENERA, NIE MOŻNA URUCHOMIĆ DYMKA

    let points = [];

    let start_point;
    let end_point;

    this.segmentPointsSet.forEach(element => {
      let markerStart;
      let markerEnd;
      start_point = element['start_point'];
      end_point = element['end_point'];
      const start_markerTemp: Marker = { lat: 0, lng: 0 };
      const end_markerTemp: Marker = { lat: 0, lng: 0 };
      start_markerTemp.lat = start_point.lat;
      start_markerTemp.lng = start_point.lng;
      end_markerTemp.lat = end_point.lat;
      end_markerTemp.lng = end_point.lng;
      points = element['points'];


      markerStart = new google.maps.Marker({
        position: start_markerTemp,
        map: this.googleMap,
        title: 'id: ' + start_point.id + ', latlng: ' + start_point.lat + '    ' + start_point.lng
        // tslint:disable-next-line:max-line-length

      });


      const info = new google.maps.InfoWindow({
        content: '<html>' +
          '<head>' +
          '<style>' +
          'p {' +
          'color: blue;' +
          'font-size:15px' +
          '}' +
          '.gm-style-iw {' +
          'top: 0 !important;' +
          'left: 10 !important;' +
          'color:blue' +
          'width:500px !important;' +
          'height:50px !important;' +
          'padding-left: 10px;' +
          'margin:3px 6px 0px 0px;' +
          '}' +
          '</style>' +
          '</head>' +
          '<body>' +
          '<div class="gm-style-iw">' +
          '<p>' + 'ID: ' + start_point.id + ' LatLng: ' + start_point.lat + '    ' + start_point.lng + '</p>' +
          '</div>' +
          '</body>' +
          '</html>',
      });

      markerStart.addListener('click', function () {
        info.open(this.googleMap, markerStart);
        markerStart.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
      });

      this.markersListenerArray.push(markerStart);

      markerEnd = new google.maps.Marker({
        position: end_markerTemp,
        map: this.googleMap,
        title: 'id: ' + end_point.id + ', latlng: ' + ' ' + end_point.lat + '    ' + end_point.lng,
        // tslint:disable-next-line:max-line-length

      });


      const info2 = new google.maps.InfoWindow({
        content: '<html>' +
          '<head>' +
          '<style>' +
          'p {' +
          'color: blue;' +
          'font-size:15px' +
          '}' +
          '.gm-style-iw {' +
          'top: 0 !important;' +
          'left: 10 !important;' +
          'color:blue' +
          'width:500px !important;' +
          'height:50px !important;' +
          'padding-left: 10px;' +
          'margin:3px 6px 0px 0px;' +
          '}' +
          '</style>' +
          '</head>' +
          '<body>' +
          '<div class="gm-style-iw">' +
          '<p>' + 'ID: ' + end_point.id + ' LatLng: ' + end_point.lat + '    ' + end_point.lng + '</p>' +
          '</div>' +
          '</body>' +
          '</html>',

      });

      markerEnd.addListener('click', function () {
        info2.open(this.googleMap, markerEnd);
        markerEnd.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
      });
      this.markersListenerArray.push(markerEnd);

      this.markersArray.push(start_markerTemp);

      points.forEach(point => {
        const markerTemp: Marker = { lat: 0, lng: 0 };
        markerTemp.lat = point.lat;
        markerTemp.lng = point.lng;
        this.markersArray.push(markerTemp);

        // marker = new google.maps.Marker({
        // position: markerTemp,
        //    map: this.googleMap,
        // icon: 'http://maps.google.com/mapfiles/kml/pal4/icon49.png'
        // });
      });

      this.markersArray.push(end_markerTemp);
      this.drawPath();

      this.markersArray = [];


    });

    console.log('MarkersListenerArray');
    console.table(this.markersListenerArray);
    console.log(this.markersArray);

  }