React-google-maps: Center value changes on its own on different zoom value

[ArtyomResh]

Hi! :)

I ran into strange behavior with center and zoom props (I also tried defaultZoom and defaultCenter props). Here is the code of render function of my component:

render() {
        const { comrades, profileGeoCoordinates } = this.props
        console.log('center', profileGeoCoordinates)

        return <div>
            <GoogleMap
                options={mapOptions}
                center={profileGeoCoordinates}
                zoom={2}
                onCenterChanged={() => {
                    console.log('onCenterChanged', { lat: this.mapRef.getCenter().lat(), lng: this.mapRef.getCenter().lng() })
                }}
                onIdle={() => {
                    console.log('onIdle', { lat: this.mapRef.getCenter().lat(), lng: this.mapRef.getCenter().lng() })
                    console.log('onIdle', { zoom: this.mapRef.props.zoom })
                }}
                ref={ref => this.mapRef = ref }
            >
                {comrades.map(this.mapComrades)}
            </GoogleMap>
        </div>
    }

I pass profileGeoCoordinates from store and when zoom value < 2 it's rendering with correct center:

but when zoom value > 2 center value changes on it's own:

It seems somehow connected with InfoBoxes that I render in this.mapComrades — if they all fit into the map center do not change, else it's different on each zoom, but this is only an assumption.

What I'm missing? What should I do to get a correct center of the map on the first render?

[erango]

We're facing the same issue here! Turns out it's by design, and you can turn it off. I scanned through past issues and found this -- resolved the issue for us: #716

[ArtyomResh]

Thank you! :D