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')
);