React-google-maps: Unable to Reset Zoom and Center to default Zoom and default Center using setZoom and setCenter methods

[Mahmood004]

I want to set map zoom and center to default zoom and default center by using methods like setZoom and setCenter when someone zoom in or changed the center.

But these two methods are not available in react-google-maps package. How can i solve this issue ??

[AonanLi]

Not sure if I get what you mean, but If you dont want to change map zoom and center, you could just set zoom and center (not defaultZoom and defaultCenter) in GoogleMaps.

[evonsdesigns]

@Mahmood004 Take a look at this solution https://github.com/tomchentw/react-google-maps/issues/188#issuecomment-172691548.

There was a PR to expose these API functions but it looks like the module owner does not want it added.

[mryczkowski]

@evonsdesigns is right, and that decision is silly to me.
The suggested solution is to manage zoom in state and pass the zoom prop to your GoogleMap component, but for me it seems to only work the first time. So if like for me, it doesn't work for you, then it seems you gotta also listen for when zoom changed and update the props with that value as well. Something like this:

onZoomChanged = () => {
    this.setState({zoom: this.map.getZoom()});
}

render() {
    return (
        <GoogleMap
            ref={map => this.map = map}
            zoom={this.state.zoom}
            onZoomChanged={this.onZoomChanged}
        >
        </GoogleMap>
    );
}