I have the following main.jsx file in my react app which displays a map. Here I am initially setting the latitude variable of my marker, and then I have a trigger function to change it every five seconds. This works as i have console logged the values each time.
However, it isn’t moving the marker on the map to reflect the new latitude value. Any ideas how i can keep refreshing the marker on the map when the latitude value changes?
const location = {
lat: 53.41,
lng: -2.89,
};
export const ChatPage = () => {
const { name } = useParams();
const ws = useRef();
const MINUTE_MS = 5000;
//initial latitude/longitude values
let lat = 53.41;
let long = -2.89;
//triggers change latitude every 5 seconds
useEffect(() => {
const interval = setInterval(() => {
lat = lat + 50;
}, MINUTE_MS);
return () => clearInterval(interval);
}, []);
return (
<main className='chat-wrapper'>
<MapSection location={location} zoomLevel={18} markerLat={lat} markerLong={long} />{' '}
</main>
);
};
The map section component code is in this file, it gets the markerLat and markerLong and should update the MyNewMarker component:
const Map = ({ location, zoomLevel, markerLat, markerLong }) => (
<div className='map'>
<div className='google-map'>
<GoogleMapReact
bootstrapURLKeys={{ key: 'keyid' }}
defaultCenter={location}
defaultZoom={zoomLevel}>
<MyNewMarker lat={markerLat} lng={markerLong} text={'A'} />
</GoogleMapReact>
</div>
</div>
);
export default Map;
Below is MyNewMarker component:
export default class MyNewMarker extends Component {
static propTypes = {
text: PropTypes.string,
};
static defaultProps = {};
shouldComponentUpdate = shouldPureComponentUpdate;
render() {
return (
<div style={greatPlaceStyle}>
<img src={image1} alt='image1' />
</div>
);
}
}