updating center from parent does not reposition map

[asyncjason]

sorry, I've searched and can't seem to find the answer.

I'm updating center of map from parent component but the map is not repositioning. What am I missing here?
Cheers

export class GMapReact extends Component {
    render() {
        console.log("center:", this.props.center);
        return (
            <GoogleMap
                bootstrapURLKeys={{ key: [GOOGLE_API_KEY] }}
                center={this.props.center}
                zoom={this.props.zoom}
            >
                {this.props.markers.map((marker, i) => {
                    return (
                        <MarkerComponent
                            key={i}
                            lat={marker.latitude}
                            lng={marker.longitude}
                            text={marker.name}
                        />
                    )
                })}
            </GoogleMap>
        );
    }
}

[itsmichaeldiego]

@jseparovic Do you interact with the map before you change the center? If that is the case, this might be related to #176 and your solution would be using _onChange method, you can see an example in here: https://jsbin.com/roqutisoqu/1/edit?js,console,output

If you're not interacting with the map, and you trying to change the center, I need to know what is the method you're using to change the center. Please provide a live example if possible.

[itsmichaeldiego]

@jseparovic Check here: https://github.com/istarkov/google-map-react/blob/master/DOC.md#simple-example

[asyncjason]

@itsmichaeldiego I'm just using the parent state and updating it when a user finds a google place in a search field (using react-places-autocomplete)

The handler method looks like:

    handlePlaceSelect = (place) => {
        this.updateState(STATE_SECTION_INPUTS, {place: place});
        this.updateState(STATE_SECTION_MAP, {lat: this.getPlaceLatitude()});
        this.updateState(STATE_SECTION_MAP, {lng: this.getPlaceLongitude()});
    };

updateState function is just a setState wrapper:

    updateState(section, stateChange) {
        var state = Object.assign({}, this.state);
        for(var key of Object.keys(stateChange))
        {
            console.log("updating", key, stateChange[key]);
            state[section][key] = stateChange[key];
        }
        this.setState(state);
    }

And the component in the parent render()

                    <GMapReact
                        center={ this.state.map }
                        zoom={ 15 }
                        markers={ this.state.results.items }
                    />

[asyncjason]

@itsmichaeldiego I've tried to setup a demo
I'm using react 16.2.0 in my project btw

For some reason the map doesn't show in the demo

I'm trying to simulate the update in parent state to show the map not recentering, but not having much luck

https://codesandbox.io/s/5z35k7566x

[itsmichaeldiego]

@jseparovic Have you tried this? #512 (comment)

[asyncjason]

@itsmichaeldiego I did try that, but I thought that was more for resizing the browser window?

[asyncjason]

@itsmichaeldiego is it possibly a v16 issue? That's what I'm using in my project, and same in the codesandbox

[asyncjason]

@itsmichaeldiego I have the codesandbox showing the issue now. center is updated, but the map does not recenter:

https://codesandbox.io/s/mjp08rvxmj

This is also using v16.2.0

[itsmichaeldiego]

@jseparovic You're right, I can reproduce it, let me work on an example on my own to see how can we make this work!

[itsmichaeldiego]

@jseparovic Hey, I think the problem is related on how the state works. Check this repo I created a while ago for an interview, here I change the center: https://github.com/itsmichaeldiego/earthquaker.
Feel free to clone the project, run yarn and then yarn start and it will work, I just tested, it works like a charm. I also just updated google-map-react to 0.34.0.

[asyncjason]

@itsmichaeldiego you're right, it was my updateState setState wrapper. For some reason I thought I had to update this way to maintain other state keys, but I see setState already does this.
Thanks for you help. Cheers

working here: https://codesandbox.io/s/2oy1nj9kyy