Create Google Maps Circle and set its radius in React

Question

Given the below data:

[
        {
            "id": 1,
            "name": "Park Slope",
            "latitude": "40.6710729",
            "longitude": "-73.9988001"
        },
        {
            "id": 2,
            "name": "Bushwick",
            "latitude": "40.6942861",
            "longitude": "-73.9389312"
        },
        {
            "id": 3,
            "name": "East New York",
            "latitude": "40.6577799",
            "longitude": "-73.9147716"
        }
    ]
]

I'm creating markers via react-google-maps like this:

<Map
    center={{ lat: 40.64, lng: -73.96 }}
    zoom={12}
    places={data}
    googleMapURL="https://maps.googleapis.com/maps/api/js?key="
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `800px` }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />

where

class Map extends React.Component {
  render() {
    return (
      <GoogleMap
        defaultZoom={this.props.zoom}
        defaultCenter={this.props.center}
      >
        {this.props.places.map(place => {
          return (
            <Marker
              position={{
                lat: parseFloat(place.latitude),
                lng: parseFloat(place.longitude)
              }}
            />
          );
        })}
      </GoogleMap>
    );
  }
}

Now along with markers I would like to render a circle but only for a specific marker, for example for the first place:

{
    "id": 1,
    "name": "Park Slope",
    "latitude": "40.6710729",
    "longitude": "-73.9988001"
}, 

something like below:

Is it supported to render and circle via react-google-maps and in addition to specify properties such as radius?

Solution

Since markers properties are passed via places prop, one option to consider would be to pass circle properties along with places data, for example:

const places = [
  {
    id: 1,
    name: "Park Slope",
    latitude: "40.6710729",
    longitude: "-73.9988001",
    circle: {
      radius: 3000,
      options: {
        strokeColor: "#ff0000"
      }
    }
  },   
  ...
] 

Then to render markers along with a circles Map component could be modified like this:

class Map extends React.Component {
  render() {
    return (
      <GoogleMap
        defaultZoom={this.props.zoom}
        defaultCenter={this.props.center}
      >
        {this.props.places.map(place => {
          return (
            <Fragment key={place.id}>
              <Marker
                position={{
                  lat: parseFloat(place.latitude),
                  lng: parseFloat(place.longitude)
                }}
              />
              {place.circle && (
                <Circle
                  defaultCenter={{
                    lat: parseFloat(place.latitude),
                    lng: parseFloat(place.longitude)
                  }}
                  radius={place.circle.radius}
                  options={place.circle.options}
                />
              )}
            </Fragment>
          );
        })}
      </GoogleMap>
    );
  }
}

Demo