Keep updating markers on map on top of an overlay image - google maps react

Question

I have the following code which has an overlay image on the map.

However, i would like to display markers on top of this overlay image. The markers come from a users array which is constantly being updated. I want to loop through these markers and place them on the map, but keep updating them if they change longitude/latitude.

I have tried some code below, the data is getting passed to the components correctly, but the markers are always staying in the same position. Could anyone tell me what i'm doing wrong?

Below is my main map code

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>
    );

Below is MyGreatPlace.jsx file for the markers:

export default function MyGreatPlace({ i, latitude, longitude, sender }) {
    console.log(sender);

    return (
        <div style={{ width: 60, height: 60, background: 'green' }}>
            {latitude} {longitude} {sender}
        </div>
    );
}

Below is OverlayImage.jsx file for the overlay image:

export default class OverlayImage extends Component {
    static propTypes = {
        text: PropTypes.string,
    };

    static defaultProps = {};

    shouldComponentUpdate = shouldPureComponentUpdate;

    render() {
        return <div>{<img src={floorplan} alt='floorplan' />}</div>;
    }
}

Do i need to make the MyGreatPlace component the same as the overlay component? I'm not sure how props would work getting the longitude/latitude passed in?

Answer 1

The solution was to change MyGreatPlace file to the same as the overlay component, to look like this:

export default class MyGreatPlace extends Component {
    static propTypes = {
        text: PropTypes.string,
    };

    static defaultProps = {};

    shouldComponentUpdate = shouldPureComponentUpdate;

    render() {
        return <div>{this.prop.text}</div>;
    }
}