Map doesn't render markers on initial load and Cluster Markers disappearing.

I am using the library to show markers from Mobx Data store but the markers don’t show unless I have changed the source file and the UI is updated by HotModuleReplacement. Hopefully, I can get a solution as the library is Great!!

Here is my Map Comp:

@inject("map") @observer
export default class Map extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const mapStore = this.props.map

        const GettingStartedGoogleMap = withGoogleMap((props) => (
            <GoogleMap
                style={{
                    height: 100,
                    width: 100,
                }}
                onIdle={props.onIdle}
                onBoundsChanged={props.onBoundsChanged}
                defaultOptions={{ styles: this.mapStyles }}
                defaultZoom={mapStore.zoom}
                defaultCenter={{ lat: mapStore.center.lat, lng: mapStore.center.lng }}>
                {
                    props.markers.map((marker) => (
                        <Marker
                            position={marker}
                            icon={{
                                url: require('../../images/marker.png')
                            }}
                        />
                    ))
                }
            </GoogleMap>
        ))

        return (
            <GettingStartedGoogleMap
                style={{
                    height: 100,
                    width: 100,
                }}
                onIdle={() => {
                    mapStore.fetchMarkers()
                }}
                markers={this.props.map.markers}
                containerElement={
                    <div style={{ height: 'calc(100vh - 70px)' }
                    } />
                }
                mapElement={
                    <div style={{ height: 'calc(100vh - 70px)' }} />
                } />
        )
    }

    mapStyles = [MY MAPS STYLES]

}

Thanks in advance!

[NathHorrigan]

Issue turned out to be related to MobX and I had to do this:

<GettingStartedGoogleMap
                style={{
                    height: 100,
                    width: 100,
                }}
                onMapLoad={() => {
                    mapStore.fetchMarkers()
                }}
                onBoundsChanged={() => {
                    mapStore.fetchMarkers()
                }}
                markers={mobx.toJS(this.props.map.markers)} // <------ HERE
                containerElement={
                    <div style={{ height: 'calc(100vh - 70px)' }
                    } />
                }
                mapElement={
                    <div style={{ height: 'calc(100vh - 70px)' }} />
                } />

Now I’m having problem with ClusterMarkers, When I zoom in they disappear. Normal Markers work fine without ClusterMarkers.

[MathieuCh]

Could you paste the marker object from your store ? 👍