Issues with markers on Google Maps API - not always loading

[anafaria-slefty]

I'm working on a website with Google Maps API, particularly with @ubilabs/google-maps-react-hooks. I'm not very experienced so I'm having some difficulties understanding why there's an issue. When I load the website (either locally or online) the markers don't always show up. It could be on loading the site at first or when I refresh, they disappear and reapper upon new refreshing of the page. This never happens if I have my developer tools open (docked or undocked) and I can't figure out why! I've been trying for days.

index.txs

import { GoogleMapsProvider } from '@ubilabs/google-maps-react-hooks';
import React, { useState, useEffect, useCallback} from 'react';
import { useGeoReportState } from '../../context/GeoReportContext';
import { useMapContext, useMapDispatch } from '../../context/MapContext';
import { options } from './MapElements';
import TestMap from './TestMap';

const Index = () => {
    const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);

    const mapDispatch = useMapDispatch();
    const mapState = useMapContext();
    const reportState = useGeoReportState();
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const onLoad = useCallback((map: any) => {
        mapDispatch.setMap(map);
        google.maps.event.trigger(map, 'resize');
    }, [reportState]);
    return (
        <>
        <div className='flex flex-col w-full h-full'>
            <GoogleMapsProvider
                mapOptions={options(mapState)}
                googleMapsAPIKey={process.env.REACT_APP_API_KEY as string}
                mapContainer={mapContainer}
                version='beta'
                onLoadMap={onLoad}
                libraries={['places']}
            >
                <TestMap />
                <div ref={(node) => setMapContainer(node)} style={{ height: '100vh' }} />
            </GoogleMapsProvider>
        </div> 

    </>
    );
};

export default Index;

TestMap.tsx

import React, { useState, useEffect, SetStateAction } from 'react';
import { useGeoReportState } from '../../context/GeoReportContext';
import { useMapContext } from '../../context/MapContext';
import { findMode, formSubmitGeoCoder, getSoilTypeColor } from '../../utils/Util';
import Navbar from '../Navbar';
import { notificationHandler, surveyLengthHandler } from '../../utils/ContextHandlers';
import { MarkerClusterer, SuperClusterAlgorithm } from '@googlemaps/markerclusterer';
import Icon from '../../img/point.png';
import FileSubmit from '../Form/FileSubmit';
import Form from '../Form/Form';
import ThankYou from '../Form/ThankYou';
import { IconContext } from 'react-icons';
import { AiOutlineLeft, AiOutlineRight, AiOutlineReload } from 'react-icons/ai';
import { GeoReport, Survey } from '../../types/GeoReportTypes';
import { SurveyData } from '../../types/SurveyTypes';
import { useNotificationDispatch } from '../../context/NotificationContext';
import { useSurveyDispatch } from '../../context/SurveyContext';
import PointData from '../Form/PointData';
import { useGoogleMap } from '@ubilabs/google-maps-react-hooks';

const TestMap: React.FC = () => {

    const geoReportState = useGeoReportState();
    const notificationDispatch = useNotificationDispatch();
    const mapState = useMapContext();
    const surveyDispatch = useSurveyDispatch();
    const map = useGoogleMap();

    let formData = {};

    const [showFileSubmit, setShowFileSubmit] = useState(false);
    const [showSliderForms, showSlider] = useState(false);
    const [showThankYouForms, setShowThankYou] = useState(false);
    const [surveys, setSurveys] = useState<Survey[]>([]);
    const [email, setEmail] = useState<string>();
    const [thisMarkers, setThisMarkers] = useState<google.maps.Marker[]>([]);
    const [circles, setCircles] = useState<google.maps.Circle[]>([]);
    const [pointDataArray, setPointDataArray] = useState<GeoReport | null>(null);
    const [distanceBetween, setDistanceBetween] = useState<number | null>(null);
    const [surveyNumber, setSurveyNumber] = useState(surveys.length + 1);
    const [selectedFile, setSelectedFile] = useState<File | null>(null);
    const [selectedImage, setSelectedImage] =useState<string>();

    const incrementCount = () => {
        setSurveyNumber(surveyNumber + 1);
    };

    const resetCount = () => {
        setSurveyNumber(1);
    };

    useEffect(() => {
        if (!map) return;
        if (thisMarkers.length == 0) {
            Object.entries(geoReportState.map).map(([, reports]) => {
                addMarkers(undefined, reports, thisMarkers, setThisMarkers, setPointDataArray);
                addCircles(undefined, setPointDataArray, reports, circles, setCircles);
            });
        }
        thisMarkers.forEach(marker => {
            marker.setMap(map);
        });
    }, [mapState]);

    useEffect(() => {
        if (!map) return;

        map.addListener('zoom_changed', () => {
            if (map.getZoom()! >= 11) {
                thisMarkers.forEach(marker => {
                    marker.setMap(null);
                });
                circles.forEach(circle => {
                    circle.setMap(map);
                });
            }
            if (map.getZoom()! < 11) {
                thisMarkers.forEach(marker => {
                    marker.setMap(map);
                });
                circles.forEach(circle => {
                    circle.setMap(null);
                });
            }
        });

    }, [map?.getZoom()]);

    thisMarkers.forEach(marker => {
        marker.addListener('click', () => {
            if (showSliderForms === true) {
                showSlider(false);
            }
        });
    });

    const handleOpenSlider = () => {
        showSlider(!showSliderForms);
        if (pointDataArray) {
            handleClosePointData();
        }
    };

    const handleOpenFileSubmit = () => {
        if (surveys.length === 0) {
            notificationHandler(2, 'Por favor introduza valores válidos', notificationDispatch);
        } else {
            setShowFileSubmit(!showFileSubmit);
        };
    };

    const handleOpenThankYou = () => {
        setShowThankYou(!showThankYouForms);
    };

    const handleClosePointData = () => {
        setPointDataArray(null);
        setDistanceBetween(null);
    };

    const handleSubmitNew = () => {
        setShowThankYou(!showThankYouForms);
        setShowFileSubmit(!showFileSubmit);
        setSurveys([]);
        resetCount();
        setSelectedFile(null);
        setSelectedImage('');
    };

    const handleExit = () => {
        setShowThankYou(!showThankYouForms);
        setShowFileSubmit(!showFileSubmit);
        showSlider(!showSliderForms);
        setSurveys([]);
        resetCount();
        setSelectedFile(null);
        setSelectedImage('');
    };

    const handleAddSurvey = (event: { preventDefault: () => void; }, lat: number, lng: number, nFreatico: boolean, inFreatico: number, nSPT: boolean, table: SurveyData[]) => {
        event.preventDefault();
        if (lat === 0 || lng === 0 || lat === undefined || lng === undefined || table.length === 0 || (nFreatico === true && (inFreatico === undefined || inFreatico === 0))) {
            notificationHandler(2, 'Por favor introduza valores válidos', notificationDispatch);
        } else {
            if(nSPT) {
                table.map(e => e.spt1 = 1000);
            }
            if (nFreatico === true) {
                const dummy = {
                    lat: lat,
                    lng: lng,
                    nFreatico: nFreatico,
                    inFreatico: inFreatico,
                    table: table,
                };
                surveys.push(dummy);
            } else {
                const dummy = {
                    lat: lat,
                    lng: lng,
                    nFreatico: nFreatico,
                    inFreatico: 0,
                    table: table,
                };
                surveys.push(dummy);
            };
            setSurveys([...surveys]);
            incrementCount();
            notificationHandler(1, 'Sondagem submetida com sucesso', notificationDispatch);
            surveyLengthHandler(surveys.length, surveyDispatch);
        }
    };

    const handleClearSurveys = (event: { preventDefault: () => void; }) => {
        event.preventDefault();
        setSurveys([]);
        resetCount();
    };

    const handleFileInput = (e: any, type: number) => {
        e.preventDefault();
        const file = e.target.files[0];
        if (type === 1) {
            if (file) {
                if (file.type === 'application/pdf') {
                    setSelectedFile(file);
                } else {
                    notificationHandler(
                        2,
                        'Por favor seleciona um ficheiro tipo PDF',
                        notificationDispatch,
                    );
                }
            }
        } else if (selectedImage) {
            setSelectedImage(file);
        } 
        // else {
        //  notificationHandler(
        //      2,
        //      'Por favor seleciona uma imagem do tipo PNG ou JPEG',
        //      notificationDispatch
        //  );
        //}
    };

    const handleUploadPDF = (e: any, filename: string) => {
        e.preventDefault();
        if (selectedFile) {
            const formPDFData = new FormData();
            formPDFData.append('filename', filename);
            formPDFData.append('file', selectedFile);
            fetch(process.env.REACT_APP_BACKEND + '/api/drive', {
                method: 'POST',
                body: formPDFData
            });
                //.then((response) => (console.log(response)))
                //.catch((error) => console.log(error));
        }
    };

    const handleUploadImage = (e: any, filename: string) => {
        e.preventDefault();
        if (selectedImage) {
            const formImgData = new FormData();
    //      formImgData.append('filename', filename);
            formImgData.append('image', selectedImage);
    //      fetch(process.env.REACT_APP_BACKEND + '/api/drive/image', {
    //          method: 'POST',
    //          body: formImgData,
    //      })
    //          .then((response) => console.log(response))
    //          .catch((error) => console.log(error));
        }
    };

    const handleSubmitForm = async (e: { preventDefault: () => void; }) => {
        e.preventDefault();

        if (!surveys[0]) {
            notificationHandler(
                2,
                'Não é possível submeter sem qualquer sondagem',
                notificationDispatch
            );
        }

        const lat = surveys[0].lat;
        const lng = surveys[surveys.length - 1].lng;

        const { adress, placeId } = await formSubmitGeoCoder(Number(lat), Number(lng), notificationDispatch);

        if(email) {
            if (selectedFile) {
                const fileName = selectedFile.name;
                const editedName = fileName.substring(0, fileName.length - 4);
                if (selectedImage) {
                //    const oldImgName = selectedImage.name;
                //    const imgExtension = oldImgName.substring(oldImgName.length - 4, oldImgName.length);
                //    const imgName = `logo_${editedName}${imgExtension}`;
                    formData = { adress, placeId, lat, lng, email, surveys, fileName, selectedImage };
                } else {
                    formData = { adress, placeId, lat, lng, email, surveys, fileName };
                }
                const requestOptions = {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                };
                const response = await fetch(process.env.REACT_APP_BACKEND + '/api/report', requestOptions);
                if (response.ok) {
                    handleOpenThankYou();
                    setSurveys([]);
                    resetCount();
                    handleUploadPDF(e, selectedFile.name);
                    if (selectedImage) {
                    //    const oldImgName = selectedImage.name;
                    //    const imgExtension = oldImgName.substring(oldImgName.length - 4, oldImgName.length);
                    //    const imgName = `logo_${editedName}${imgExtension}`;
                       handleUploadImage(e, selectedImage);
                    };
                }
                if (!response.ok) {
                    notificationHandler(
                        2,
                        'Erro',
                        notificationDispatch
                    );
                }

            } else {
                notificationHandler(
                    2,
                    'Para validação do relatório iremos necessitar do mesmo em formato PDF',
                    notificationDispatch
                );
            }
        } else {
            notificationHandler(
                2,
                'Insira um e-mail para poder submeter os dados',
                notificationDispatch
            ); 
        }
    };

    return (
        <>
            <div className='flex flex-col w-full h-full'>
                <Navbar setPointDataArray={setPointDataArray} setDistanceBetween={setDistanceBetween} />
                {showSliderForms ? (
                    <>
                        <div className='z-30'>
                            <div className='bg-white sm:absolute sm:right-0 h-auto max-h-full sm:h-full sm:w-[40%] overflow-y-scroll'>
                                {showThankYouForms ? (
                                    <>
                                        <ThankYou />
                                        <div className='justify-center mb-5 items-center flex space-x-2'>
                                            <button
                                                className='bg-blue-helica w-40 h-10 rounded-md text-xs text-white p-1'
                                                onClick={handleSubmitNew}
                                            >
                                                Submeter novo estudo
                                            </button>
                                            <button
                                                className='bg-blue-helica w-40 h-10 rounded-md text-xs text-white p-1'
                                                onClick={handleExit}
                                            >
                                                Sair
                                            </button>
                                        </div>
                                    </>
                                ) : (
                                    <>
                                        <button
                                            type='button'
                                            className='bg-white border ml-4 mt-4'
                                            onClick={handleOpenSlider}
                                        >
                                            <IconContext.Provider
                                                value={{
                                                    color: '#000000',
                                                    className: 'h-6 sm:h-9 w-6 sm:w-9',
                                                }}
                                            >
                                                <AiOutlineRight />
                                            </IconContext.Provider>
                                        </button>
                                        <form className='h-auto'>
                                            {showFileSubmit ? (
                                                <>
                                                    <FileSubmit setEmail={setEmail} surveys={surveys} handleFileInput={handleFileInput} selectedFile={selectedFile} selectedImage={setSelectedImage} />
                                                    <div className='justify-center mb-5 items-center flex space-x-2'>
                                                        <button
                                                            className='bg-blue-helica w-40 h-10 rounded-md text-xs text-white p-1'
                                                            onClick={() => {
                                                                handleOpenFileSubmit();
                                                            }}
                                                        >
                                                            Passo Anterior
                                                        </button>
                                                        <button
                                                            className='bg-blue-helica w-40 h-10 rounded-md text-xs text-white p-1'
                                                            onClick={(event) => {
                                                                handleSubmitForm(event);
                                                            }}
                                                        >
                                                            Enviar
                                                        </button>
                                                    </div>
                                                </>
                                            ) : (
                                                <>
                                                    <Form handleOpenFileSubmit={handleOpenFileSubmit} handleAddSurvey={handleAddSurvey} handleClearSurveys={handleClearSurveys} surveyNumber={surveyNumber} />
                                                </>
                                            )}
                                        </form>
                                    </>
                                )}
                            </div>
                        </div>
                    </>
                ) : (
                    <>
                        {pointDataArray ? (
                            <>
                                <div className='z-30'>
                                    <div className='bg-transparent right-[35%] absolute top-auto mt-3 h-auto max-h-full w-auto'>
                                        <button
                                            type='button'
                                            className='bg-white border'
                                            onClick={handleOpenSlider}
                                        >
                                            <IconContext.Provider
                                                value={{
                                                    color: '#000000',
                                                    className: 'h-6 sm:h-9 w-6 sm:w-9',
                                                }}
                                            >
                                                <AiOutlineLeft />
                                            </IconContext.Provider>
                                        </button>
                                    </div>
                                </div>
                            </>
                        ) : (
                            <>
                                <div className='z-30'>
                                    <div className='bg-transparent absolute right-4 top-auto mt-3 mr-12 h-auto max-h-full w-auto'>
                                        <button
                                            type='button'
                                            className='bg-white border mr-2 align-top'
                                            title='Recarregar pontos de sondagem'
                                        >
                                            <IconContext.Provider
                                            value={{
                                            color: '#000000',
                                            className: 'h-8 sm:h-10 w-8 sm:w-10',
                                        }}
                                    >
                                        <AiOutlineReload />
                                    </IconContext.Provider>
                                        </button>
                                        <button
                                            type='button'
                                            className='bg-white border'
                                            onClick={handleOpenSlider}
                                        >
                                            <IconContext.Provider
                                                value={{
                                                    color: '#000000',
                                                    className: 'h-12 sm:h-14 w-12 sm:w-14',
                                                }}
                                            >
                                                <AiOutlineLeft />
                                            </IconContext.Provider>
                                        </button>
                                    </div>
                                </div>
                            </>
                        )}
                    </>
                )}
                {pointDataArray ? (
                    <>
                        <div className='z-30'>
                            <div className='bg-white absolute sm:right-0 h-auto max-h-full sm:h-full sm:w-1/3 overflow-y-scroll'>
                                <PointData pointDataArray={pointDataArray} distance={distanceBetween} handleClosePointData={handleClosePointData} map={map} />
                            </div>
                        </div>
                    </>
                ) : (null)}
            </div>
        </>
    );
};

function addMarkers(
    map: google.maps.Map | undefined,
    reports: GeoReport[],
    thisMarkers: google.maps.Marker[],
    setThisMarkers: React.Dispatch<React.SetStateAction<google.maps.Marker[]>>,
    setPointDataArray: React.Dispatch<React.SetStateAction<GeoReport | null>>,
) {

    let isVisited = false;

    const markers = reports.map((report: GeoReport) => {

        const marker = new google.maps.Marker({
            position: { lat: report.lat, lng: report.lng },
            map: map,
            icon: Icon,
        });

        marker.addListener('click', () => {
            isVisited = !isVisited;
            if (isVisited === true) {
                setPointDataArray(report);
            }
        });

        thisMarkers.push(marker);
        setThisMarkers([...thisMarkers]);

        new MarkerClusterer({
            markers: thisMarkers,
            map,
            algorithm: new SuperClusterAlgorithm({ radius: 200 }),
        });

        return marker;
    });
}

const addCircles = (
    map: google.maps.Map | undefined,
    setPointDataArray: React.Dispatch<React.SetStateAction<GeoReport | null>>,
    reports: GeoReport[], circles: google.maps.Circle[],
    setCircles: React.Dispatch<SetStateAction<google.maps.Circle[]>>,
) => {

    let isVisited = false;
    const addresses: string[] = [];

    reports.map((report: GeoReport) => {

        report.surveys.map(survey => {
            survey.table.map(data => {
                addresses.push(data.soilType);
            });
        });

        let color = '#FFFFFFF';
        const soilType = findMode(addresses);
        if (soilType) {
            color = getSoilTypeColor(soilType);
        }
        const marker = new google.maps.Circle({
            center: { lat: report.lat, lng: report.lng },
            radius: 500,
            strokeColor: color,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: color,
            fillOpacity: 0.35,
            map,
        });

        marker.addListener('click', () => {
            isVisited = !isVisited;
            if (isVisited === true) {
                setPointDataArray(report);
            }
        });

        circles.push(marker);
        setCircles([...circles]);
        return marker;
    });
};

export default TestMap;

You can see here what I'm referring to! (I'm refreshing the website so it shows the problem)

Thanks in advance for any help!