React google maps

Question

Could some one let me know how to change the defaultCenter which is coming from the default property. How to change the default property and give the values from the server dynamically.

class SimpleMap extends React.Component {
    static defaultProps = {
        center: {lat: 59.95, lng: 30.33},
        zoom: 11
    };

    render() {
        return (
            <GoogleMapReact
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
            >
        )
    }
}

score 0 · Accepted Answer · answered May 22 '18 at 05:59

Please move the defaultCenter from default props to component state.

constructor(props) {

    super(props)
    this.state = {
      center: {
        lat: 59.95,
        lng: 30.33
      },
      zoom: 11
    }
  }

render

render() {
    return (
      <GoogleMapReact
       defaultCenter={this.state.center} //access here using state
       defaultZoom={this.state.zoom}
     />);
  }

Whenever you want to update center and zoom value just do state update using setState and component will re-render with new uddated value.

With Redux:

With redux,this value will come from your component container map via reducer to store.

React google maps

1 Answers1