Nrthugu

I can not set state in this code. I understand it because I did not bind the function getvalue. Otherwise I cannot call this.radius. I this code this.radius is 5000. If I changed it to

 getvalues = (e)=> { console.log(e)} 

it returns undefined.

So what do I need to do

class Mapspage extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      location: { lat: 52.2387683, lng: 5.8322737 },

      position: ,

      radius: 5000,

    };

  }



  getvalues(e) {

    this.setState({'radius': this.radius});

  }



  render() {

    const MapWithAMarker = withGoogleMap(props => (

      <GoogleMap

        defaultZoom={11}

        defaultCenter={this.state.location}

      >

        <Circle

          radius={this.state.radius}

          editable={true}

          onRadiusChanged={this.getvalues}

          onDragEnd={this.getvalues}

          draggable={true}

          visible={true}

          center={this.state.location}

        />

      </GoogleMap>

    ));



    return (

      <div className="box box-default">

          <MapWithAMarker

            containerElement={<div style={{ height: `400px` }} />}

            mapElement={<div style={{ height: `100%` }} />}

          />

        </div>

    );

  }

}

I found the answer. You need to ref the circle component and then you can call the getValues function. Also you need tot return false the shouldComponentUpdate

This is the code

class Mapspage extends React.Component {

  constructor(props) {

    super(props);



    this.state = {

      location: { lat: 52.2387683, lng: 5.8322737 },

      position: ,

      radius: 5000

    };

  }

  mapMounted = ref => {

    this.map = ref;

  };



  shouldComponentUpdate(nextProps, nextState) {

    return false;

  }



  getvalues = e => {

    const radius = this.map.getRadius();

    const center = this.map.getCenter();

    this.setState({ radius: radius });

    this.setState({

      "location.lat": center.lat(),

      "location.lng": center.lng()

    });

  };



  render() {

    const MapWithAMarker = withGoogleMap(props => (

      <GoogleMap defaultZoom={11} defaultCenter={this.state.location}>

        <Circle

          ref={this.mapMounted.bind(this)}

          radius={this.state.radius}

          editable={true}

          onRadiusChanged={props.getval}

          onDragEnd={props.getval}

          draggable={true}

          visible={true}

          center={this.state.location}

        />

      </GoogleMap>

    ));



    return (

      <div className="box box-default">

          <MapWithAMarker

            getval={this.getvalues.bind(this)}

            containerElement={<div style={{ height: `400px` }} />}

            mapElement={<div style={{ height: `100%` }} />}

          />

        </div>

    );

  }

}

Please try this, the issue seems to be with binding.

class Mapspage extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      location: { lat: 52.2387683, lng: 5.8322737 },

      position: ,

      radius: 5000,

    };

  }



  getvalues = (e) => {

    this.setState({radius: this.radius});

  }



  render() {

    const MapWithAMarker = withGoogleMap(props => (

      <GoogleMap

        defaultZoom={11}

        defaultCenter={this.state.location}

      >

        <Circle

          radius={this.state.radius}

          editable={true}

          onRadiusChanged={this.getvalues}

          onDragEnd={this.getvalues}

          draggable={true}

          visible={true}

          center={this.state.location}

        />

      </GoogleMap>

    ));



    return (

      <div className="box box-default">

          <MapWithAMarker

            containerElement={<div style={{ height: `400px` }} />}

            mapElement={<div style={{ height: `100%` }} />}

          />

        </div>

    );

  }

}