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?
Since markers properties are passed via
places
prop, one option to consider would be to pass circle properties along with places data, for example:Then to render markers along with a circles
Map
component could be modified like this:Demo