Tengo el siguiente código que tiene una imagen superpuesta en el mapa.

Sin embargo, me gustaría mostrar marcadores encima de esta imagen superpuesta. Los marcadores provienen de una matriz de usuarios que se actualiza constantemente. Quiero recorrer estos marcadores y colocarlos en el mapa, pero seguir actualizándolos si cambian de longitud/latitud.

Probé un código a continuación, los datos se pasan a los componentes correctamente, pero los marcadores siempre permanecen en la misma posición. ¿Alguien podría decirme qué estoy haciendo mal?

A continuación se muestra mi código de mapa principal

 return ( <div className='map'> <div className='google-map'> <GoogleMapReact bootstrapURLKeys={{ key: 'KEYID' }} defaultCenter={location} defaultZoom={zoomLevel}> {users?.map((user, i) => { return ( <MyGreatPlace key={i} latitude={user.latitude} longitude={user.longitude} sender={user.sender} /> ); })} <OverlayImage lat={location.lat} lng={location.lng} text={'A'} /> </GoogleMapReact> </div> </div> );

A continuación se muestra el archivo MyGreatPlace.jsx para los marcadores:

 export default function MyGreatPlace({ i, latitude, longitude, sender }) { console.log(sender); return ( <div style={{ width: 60, height: 60, background: 'green' }}> {latitude} {longitude} {sender} </div> ); }

A continuación se muestra el archivo OverlayImage.jsx para la imagen superpuesta:

 export default class OverlayImage extends Component { static propTypes = { text: PropTypes.string, }; static defaultProps = {}; shouldComponentUpdate = shouldPureComponentUpdate; render() { return <div>{<img src={floorplan} alt='floorplan' />}</div>; } }

¿Necesito hacer que el componente MyGreatPlace sea igual al componente de superposición? No estoy seguro de cómo funcionarían los accesorios para pasar la longitud/latitud.