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:
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>
);
}
}