Skip to content

Commit e8a137b

Browse files
author
Ryan O'Boril
committed
updated readme
1 parent b3524c4 commit e8a137b

File tree

1 file changed

+36
-0
lines changed

1 file changed

+36
-0
lines changed

README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -460,6 +460,42 @@ The `onClose` event is fired when the `<InfoWindow />` has been closed. It's use
460460

461461
The `onOpen` event is fired when the window has been mounted in the Google map instance. It's useful for keeping track of the state of the `<InfoWindow />` from within the parent component.
462462

463+
### Circle
464+
465+
To place a circle on the Map, set `<Circle />` as child of Map component.
466+
467+
```javascript
468+
render() {
469+
const coords = { lat: -21.805149, lng: -49.0921657 };
470+
471+
return (
472+
<Map
473+
center={coords}
474+
google={this.props.google}
475+
style={{width: 500, height: 500, position: 'relative'}}
476+
zoom={14}
477+
>
478+
<Circle
479+
radius={1200}
480+
center={coords}
481+
onMouseover={() => console.log('mouseover')}
482+
onClick={() => console.log('click')}
483+
onMouseout={() => console.log('mouseout')}
484+
options={{
485+
strokeColor: 'transparent',
486+
strokeOpacity: 0,
487+
fillColor: '#FF0000',
488+
fillOpacity: 0.2,
489+
}}
490+
/>
491+
</Map>
492+
);
493+
}
494+
```
495+
496+
#### Events
497+
498+
The `<Circle />` component listens to `onClick`, `onMouseover` and `onMouseout` events.
463499

464500
The `GoogleApiWrapper` automatically passes the `google` instance loaded when the component mounts (and will only load it once).
465501

0 commit comments

Comments
 (0)