Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

update on zoom is not working google-map-react

class SimpleMap extends React.Component {
  state = {
    center: [60.938043, 30.337157],
    zoom: 9,
    markerLat: 60.955413,
    markerLng: 30.337844
  };

  componentDidMount() {
    this.anim = setInterval(() =>
      this.setState({
          markerLat: 60.955413+Math.random()*0.2,
          markerLng: 30.337844+Math.random()*0.2
      })
      ,1)
  }

  componentWillUnmount() {
    clearInterval(this.anim);
  }

  _onChange = ({center, zoom}) => {
    console.log(center);
    this.setState({
      center: center,
      zoom: zoom,      
    });
  }

  render() {
    return (
       <GoogleMapReact
        onChange={this._onChange}
        center={this.state.center}
        zoom={this.state.zoom}>
        <div className="place" lat={this.state.markerLat} lng={this.state.markerLng}>MyPlace</div>
      </GoogleMapReact>
    );
  }
}


ReactDOM.render(
  <div style={{width: '100%', height: 400}}>
    <SimpleMap/>
  </div>,
  document.getElementById('main')
);
 
PREVIOUS NEXT
Tagged: #update #zoom #working
ADD COMMENT
Topic
Name
7+7 =