5

I have the map working when it loads, but whenever I pass props the map itself never changes.

The marker changes, but is always 1 state behind what it should be, obviously a sync issue but I'm not sure how to fix this in my component. 

class Map extends React.Component {
  state = {
     center: { lat: 50.937531, lng: 6.960278600000038 }
  }

  componentWillReceiveProps = () => {
    this.setState({
      center: { 
        lat: Number(parseFloat(this.props.city.lat)),
        lng: Number(parseFloat(this.props.city.lng))
      }
    });
  }

  render() {
    console.log(this.state.center)
    return (
      <div>
        <MapDetails
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-L-IikkM6BZ_3Z2QIzbkx4pdAkP76tok&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `100vh`}} />}
          mapElement={<div style={{ height: `100%` }} />}
          mapCenter={this.state.center}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { city: state.CityNameReducer }
}

export default connect(mapStateToProps)(Map);

const MapDetails = withScriptjs(withGoogleMap(props =>
  <GoogleMap
    defaultZoom={12}
    defaultCenter={props.mapCenter}
  >
    <Marker
      position={props.mapCenter}
    />
  </GoogleMap>
));

The biggest question I have is why the map itself is not updating?

Matt Brody
  • 1,473
  • 3
  • 14
  • 23

2 Answers2

8

Add a key to GoogleMap component. a Key should be unique each time provided. for your testing use new Date().getTime() function.

<GoogleMap key={new Date().getTime()}/>

as I mentioned its for only testing so make sure to provide this key in better way

Sajed
  • 445
  • 1
  • 8
  • 19
  • Here it works by adding key but the problem is map is flickering. How to fix this – Trinu Feb 05 '20 at 19:09
  • Thank you - I've been trying to figure this out for an hour. Can you explain to me why a key is necessary to make sure that it's updated ? – Abdel Shokair May 09 '20 at 04:36
  • changes to the key will force React to re-render the element – Sajed May 16 '20 at 21:47
  • Super!!! Workes very well – Aslam Shekh Dec 15 '21 at 18:21
  • @AslamShekh consider this solution for testing purposes only – Sajed Dec 16 '21 at 09:42
  • @Sajed any reasons why it's only for testing? Why can't used in production? – Aslam Shekh Dec 16 '21 at 09:52
  • 2
    @AslamShekh every time the rendering function is triggered, the key is regenerated, which results in the GoogleMap component being re-rendered. To avoid such extensive rendering in your React app, this should not be a solution – Sajed Dec 16 '21 at 12:40
  • @Sajed thanks for this. I was working with the same thing and had the same problem. I also get why you say that this should not be a solution one would use in production. What would be a better solution in your opinion? How would we best do this in production? thanks – Sohaib Furqan Jul 14 '23 at 13:35
-1

I may recommend you to use shouldComponentUpdate(nextProps, nextState) {} instead of componentWillReceiveProps().

I recommend you to read the following page, to understand how it works. Updating and componentWillReceiveProps

I don't have more information about what is happening in the parent of your component, so I cannot go deeper to the problem. But I think you can get the solution by changing that.

AlbertSabate
  • 122
  • 6