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?