Apply changing markers array to Google map in react

Question

Apply changing markers array to Google map in react I have a Google map in my react application which allows one single marker to be shown moving around the map (as the latitude is being changed every few seconds)

However if i had a markers array (which keeps being updated with new markers with corresponding latitude/longitude), is there a way to loop through these markers and add them to the map. It would need to keep checking they haven't changed location, or new markers haven't appeared in the array, or been deleted from the array. Essentially, it would look something like this:

    const Map = ({ location, zoomLevel, markers }) => {
        for(let marker of markers)
        {
            const [marker.markerLatVal, marker.setMarkerLatVal] = 
            useState(marker.markerLat)
        }

    useEffect(() => {
        const interval = setInterval(() => {
            changeMarkerLatitude();
        }, 2000);
        return () => clearInterval(interval);
    }, []);

    const changeMarkerLatitude = () => {
        for(let marker of markers)
        {
           marker.setMarkerLatVal(prev => prev + 50);
        }
    };
 
        return (
            <div className='map'>
                <div className='google-map'>
                    <GoogleMapReact
                     for(let marker of this.markers)
                     {
                        <MyGreatPlace lat={marker.markerLat} 
                         lng={marker.markerLong} text= 
                         {marker.markerText} />
                     }
                    </GoogleMapReact>
                </div>
            </div>
        );
 
}


 Is this possible?

Answer 1

Since this is non-working code, I can't really debug it, but this should get you 99.9999% of the way.

const Map = ({ location, zoomLevel, markers: markersList }) => {
    // We set a state array with the markers (renaming markersList in props to avoid collisions)
    const [markers, setMarkers] = useState(markersList)

    useEffect(() => {
        const interval = setInterval(() => {
            changeMarkerLatitude();
        }, 2000);
        return () => clearInterval(interval);
    }, []);

    const changeMarkerLatitude = () => {
        // map over each marker, keep original values by spreading old state, only modify what we want to change
        markers.map(marker => {
          setMarkers( prev => {
            ...prev,
            marker.latitude: marker.latitude += 50 //whatever you want here
          }
        }
    };
 
        return (
            <div className='map'>
                <div className='google-map'>
                    <GoogleMapReact
                     markers.map(marker => {
                        <MyGreatPlace lat={marker.markerLat} 
                        lng={marker.markerLong} text= 
                        {marker.markerText} />
                     })
                    </GoogleMapReact>
                </div>
            </div>
        );

}