google-map-react / old-examples

Examples for google-map-react component.
http://google-map-react.github.io/google-map-react/map/main/
357 stars 316 forks source link

Polyline is not working on path change #23

Closed mshameer closed 7 years ago

mshameer commented 7 years ago

Polyline is not working on path change with setState

const TrackGoogleMap = withGoogleMap(props => (
  <GoogleMap
    defaultZoom={14}
    defaultCenter={props.path[0]}
  >
    {props.path.length && <Polyline options={{strokeColor: '#2e10ff', geodesic: true }} path={props.path} />}
  </GoogleMap>
));

class Register extends Component {

    state = {
    path: [{lat: 8.5088733, lng: 76.909832}, {lat: 8.5100829, lng: 76.9087966}, {lat: 8.5107991, lng: 76.9081663}],
  }

    componentDidMount() {
        const options = {
          enableHighAccuracy: false,
          timeout: 1000,
          maximumAge: 0
        };
        navigator.geolocation.getCurrentPosition(this.onLocationChange);
        const id = navigator.geolocation.watchPosition(this.onLocationChange, (err) => {
          console.warn('ERROR(' + err.code + '): ' + err.message);
        }, options);
  }

    onLocationChange = (pos) => {
      var crd = pos.coords;
        const path = this.state.path;
        path.push({ lat: crd.latitude, lng: crd.longitude });
    this._timeoutId = setTimeout(() => {
       this.setState({path})
     }, 3000);
    }

    render() {
    const { errors, email, password, firstName, registerUser, inputChange } = this.props;
        console.log('this.state.path');
    return (
            <Layout title="Register">
                <div id="page-index" className="page" style={{paddingTop:60}}>
                    <TrackGoogleMap
                    loadingElement={
                      <div style={{ height: `100%` }}>
                        <CircularProgress />
                      </div>
                    }
                    containerElement={
                      <div style={{ height: window.innerHeight }} />
                    }
                    mapElement={
                      <div style={{ height: window.innerHeight, width: `100%` }} />
                    }
                path={this.state.path}
                  />
                </div>
            </Layout>);
    }
}
istarkov commented 7 years ago

wtf is this :-)?