Маркер карты Google не загружается правильно после получения даты с сервера

Question

Я использую API Google Map и OverlappingMarkerSpiderfier для отображения маркеров на карте.в первый раз все отлично работает.проблема заключается в том, что когда я загружаю данные во второй раз, я получаю данные правильно с сервера, но маркеры не загружаются на карту, как ожидалось.

функция, которая загружает и показывает карты и маркеры (он вызывается каждый раз при изменении данных с сервера)

showGoogleMap = () => {
    var zoomVal ;
    if (this.zoom!= null)
        zoomVal = this.zoom;
    else
        zoomVal = 15;


    this.map = new google.maps.Map(document.getElementById('map_canvas'), {
    mapTypeId: google.maps.MapTypeId.HYBRID,//'satellite',//google.maps.MapTypeId.ROAD,
    labels:true ,
    center: new google.maps.LatLng(this.centeredLat,this.centeredLng),
    zoom: zoomVal,  // whatevs: fitBounds will override
    scrollwheel: true,
    gestureHandling: 'greedy',

    });
    const options = { 
                        markersWontMove: true,
                        markersWontHide: true,
                        keepSpiderfied: true,
                        circleSpiralSwitchover: Infinity,
                        legWeight: 3 ,
                        nearbyDistance:40,
                        circleFootSeparation:20

                    }; 

    this.oms = new OverlappingMarkerSpiderfier(this.map, options);
    this.oms.clearMarkers();
    this.oms.clearListeners('click');
    this.oms.clearListeners('spiderfy');

    this.oms.addListener('click', function(marker) {
            var lat = marker.map.center.lat();
            var lng = marker.map.center.lng();
            var zoom = marker.map.zoom;
    marker.viewFunc(marker.image,lat,lng,zoom,marker);

    });
    this.oms.addListener('spiderfy', function(markers ,unMarkers) {
    for(var i = 0; i < markers.length; i ++) {
        markers[i].setShadow(null);
    } 

    });

    // this.oms.addListener('unspiderfy', function(markers) { 
    //  for(var i = 0; i < markers.length; i ++) { 
    //  } 
    // }); 

    var bounds = new google.maps.LatLngBounds();
    //draw the markers
    for (var i = 0; i < this.filteredFiles.length; i ++) {

        var ImgData = this.filteredFiles[i];

        var loc = new google.maps.LatLng(ImgData.latitude, ImgData.longitude);
        bounds.extend(loc);

        var nameImg = ImgData.name;//.substring(pos+2);
        var icon ='./assets/images/Icon_marker_green1.png' ;
        if(this.filteredFiles[i].is_on_field_area == 'false')//if the marker is out of field area
            icon ='./assets/images/marker_error.png' ;
        this.marker = new google.maps.Marker({
            icon:icon,
            position: loc,
            title: nameImg,// ImgData.latitude+", "+ImgData.longitude,
            map: this.map,
            image: ImgData,
            viewFunc: this.viewImage
        });
        this.oms.addMarker(this.marker);
        if( (this.filteredFiles[i].algorithms.length > 0)&&(this.check_TagImg_ImagePro(this.filteredFiles[i])) )
        {
            this.marker.setIcon('./assets/images/Icon_marker_blue1.png');
            for (var j = 0; j < this.filteredFiles[i].algorithms.length; j++) 
            {
                if(this.filteredFiles[i].algorithms[j].name == "Late blight")
                    this.marker.setIcon('./assets/images/Icon_marker_oreng1.png');
                if(this.filteredFiles[i].algorithms[j].name == "Early blight")
                    this.marker.setIcon('./assets/images/Icon_marker_red1.png');
            }
        }
    }

    var Self = this;
    this.ContextMenu = document.getElementById("my-context-menu");
    this.ContextMenu.style.display = "none";

    //draw the fields according the shape type
    this.shapeForMap =[]
    for (var i = 0; i < this.fields.length; i ++) {
        switch(this.fields[i].geometric_type){
            case "polygon":
            var polygon = new google.maps.Polygon({
                strokeColor: '#39e600',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#39e600',
                fillOpacity: 0.35,
                map: this.map,
                paths: JSON.parse(this.fields[i].location),
              });
              this.shapeForMap.push({
                  shape: polygon,
                  id: this.fields[i].geometric_id,
                  type: "polygon",
                  field: this.fields[i]
              });
            break;

            case "circle":
            var circle = new google.maps.Circle({
                strokeColor: '#39e600',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#39e600',
                fillOpacity: 0.35,
                map: this.map,
                center: JSON.parse(this.fields[i].center) ,
                radius: JSON.parse(this.fields[i].radius)
              });
              this.shapeForMap.push({
                shape: circle,
                id: this.fields[i].geometric_id,
                type: "circle",
                field: this.fields[i]
            });
            break;

            case "rectangle":
            var rectangle = new google.maps.Rectangle({
                strokeColor: '#39e600',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#39e600',
                fillOpacity: 0.35,
                map: this.map,
                bounds: JSON.parse(this.fields[i].location),
              });
              this.shapeForMap.push({
                shape: rectangle,
                id: this.fields[i].geometric_id,
                type: "rectangle",
                field: this.fields[i]
            });
            break;
        }

        /**add event listener when clicking on the shape */
        var len = this.shapeForMap.length;
        if(len>0){
            google.maps.event.addListener( this.shapeForMap[len-1].shape,'rightclick', function(event){
                Self.map.disableDoubleClickZoom=true;
            Self.right_click_event(event);
          });
         google.maps.event.addListener( this.shapeForMap[len-1].shape,'dblclick', function(event){
            Self.db_click_event(event);
          });
        }
    }
    //add event listener for disable the context menu when click on the map(outside from the polygon)
    this.map.addListener('click', function () {
        document.oncontextmenu = function() {
            return true;
        }
        Self.ContextMenu.style.display = "none ";
        });

}

на карте я вижу только метки fue (один или два из 100) ... и я получаю сообщение об ошибке:

Обращайтесь, любая помощь будет благодарна!

Спасибо.