Gmaps Bounds

demo.js

import React from 'react';
import {Gmaps, Circle} from 'react-gmaps';

const coords = {
  lat: 51.5258541,
  lng: -0.08040660000006028
}

const App = React.createClass({

  getInitialState() {
    return {
      radius: 100
    }
  },

  handleClick() {
    const {radius} = this.state;
    this.setState({
      radius: radius * 2
    });
  },

  handleRadiusChanged(e) {
    const {gmaps} = this.refs;
    const {circle} = gmaps.refs;
    const bounds = circle.getEntity().getBounds();
    gmaps.getMap().fitBounds(bounds)
  },

  render() {
    const {radius} = this.state;
    return (
      <div>
        <Gmaps
          ref="gmaps"
          width={'400px'}
          height={'300px'}
          lat={coords.lat}
          lng={coords.lng}
          zoom={12}>
          <Circle
            ref="circle"
            strokeColor={'#F44336'}
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor={'#F44336'}
            fillOpacity={0.35}
            radius={radius}
            lat={coords.lat}
            lng={coords.lng}
            onRadiusChanged={this.handleRadiusChanged} />
        </Gmaps>
        <button onClick={this.handleClick}>
          Click me!
        </button>
      </div>
    );
  }

});

React.render(<App />, document.getElementById('gmaps'));