maps.jsx

render() {
    return (
        <GoogleMaps
            containerProps={{
                style: {
                    height: "100%"
                }
            }}
            ref="map"
            disableDefaultUI={true}
            googleMapsApi={window.google.maps}
            zoom={this.state.zoomLevel}
            center={this.state.center}
            onZoomChanged={this.handleZoomChanged}
            onCenterChanged={this.handleCenterChanged}>
                {this.state.locations.map(this.renderMarker)}
        </GoogleMaps>
    )
}

handleZoomChanged() {
    const zoomLevel = this.refs.map.getZoom();
    if (this.state.zoomLevel !== zoomLevel) {
        this.setState({
            zoomLevel: zoomLevel
        });
    }
}

handleCenterChanged() {
    const center = this.refs.map.getCenter();
    if (!this.state.center.equals(center)) {
        this.setState({
            center: center
        });
    }
}