Reactjs cannot reload Google Maps with new location

Question

I am trying to reload Google Maps with the new inputted location, but it is not reloading. The correct value of lat and lng is being passed back from the SearchBar component and the state is updating correctly. I am new to react-google-maps, so I am not sure if there is another way to update the map. I assumed that once I updated the state, Google Maps would re-rendered, but that is not the case.

1. index.js

   import React, { Component }from 'react';
   import ReactDOM from 'react-dom';
   import Map from './components/map';
   import SearchBar from './components/search_bar'
   import './index.css';
   
   class App extends Component {
     constructor(props) {
       super(props);
   
       this.state = { center: {lat: 37.7547339, lng: -122.4744468 }}
   
     }
   
     locationSearch(term) {
       this.setState({center: JSON.stringify(term)});
     }
   
     render() {
       return (
         <div>
           <div className="row">
             <div className="sidebar col-md-3">
               <SearchBar
                 onSearchTermChange={this.locationSearch.bind(this)}
                 googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
                 loadingElement={<div style={{ height: `100%` }} />}
                 containerElement={<div style={{height: '400px'}} />} />
             </div>
             <div className="col-md-9">
               <Map 
                 center={this.state.center}
                 zoom={14}
                 containerElement={<div style={{height:'400px'}} />}
                 mapElement={<div style={{height:100 + '%'}} />} />
             </div>
           </div>
         </div>
       );
     }
   }
   
   ReactDOM.render(<App />, document.querySelector('.container'));
   

2. search_bar.js

   import React, { Component } from 'react';
   import { withScriptjs } from 'react-google-maps';
   import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox";
   import _ from 'lodash';
   /*global google*/
   class SearchBar extends Component {
     constructor(props) {
       super(props);
       this.refs = {};
       this.state = { center: {lat:38.5382322, lng:-121.7639065 }};
     }
   
     onSearchBoxMounted(ref) {
       this.searchBox = ref;
     }
     bounds() {
       console.log("bounds");
     }
     onPlacesChanged() {
       const places = this.searchBox.getPlaces();
       const bounds = new google.maps.LatLngBounds();
   
       places.forEach(place => {
         if (place.geometry.viewport) {
           bounds.union(place.geometry.viewport)
         } else {
           bounds.extend(place.geometry.location)
         }
       });
   
       const nextMarkers = places.map(place => ({
         position: place.geometry.location,
       }));
   
       const nextCenter = _.get(nextMarkers, '0.position', this.state.center);
   
       this.setState({
         center: nextCenter
       });
   
       this.props.onSearchTermChange(this.state.center);
     }
   
     render() {
       return(
         <StandaloneSearchBox
           ref={this.onSearchBoxMounted.bind(this)}
           bounds={this.bounds.bind(this)}
           onPlacesChanged={this.onPlacesChanged.bind(this)}>
           <input
             type="text"
             placeholder="Search for restrooms"
             style={{
               boxSizing: `border-box`,
               border: `1px solid transparent`,
               width: `240px`,
               height: `32px`,
               padding: `0 12px`,
               borderRadius: `3px`,
               boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
               fontSize: `14px`,
               outline: `none`,
               textOverflow: `ellipses`,
             }} />
         </StandaloneSearchBox>
       );
     }
   }
   
   export default withScriptjs(SearchBar);
   

3. map.js

   import React, { Component } from 'react';
   import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
   
   class Map extends Component {
     constructor() {
       super();
       this.state = {
         map: null
       }
     }
   
     mapMoved() {
       console.log('mapMoved: '+ JSON.stringify(this.state.map.getCenter()));
     }
   
     mapLoaded(map) {
       if(this.state.map !== null) {
         return;
       }
   
       console.log("here: " + JSON.stringify(this.props.center));
   
       this.setState({
         map: map
       });
     }
   
     render() {
       const markers = this.props.markers || []
       console.log("reload");
       return (
           <GoogleMap
             ref={this.mapLoaded.bind(this)}
             onDragEnd={this.mapMoved.bind(this)}
             defaultZoom={this.props.zoom}
             defaultCenter={this.props.center}>
             {markers.map((marker, index) => (
                 <Marker {...marker} />
               )
             )}
           </GoogleMap>
       );
     }
   }
   
   export default withGoogleMap(Map)
   

Answer 1

Just based on quick look, I think you probably need to add componentWillReceiveProps() to the Map class and update the this.state.map using setState() when you have an updated value of lat and lng.