Circle / CircleF
The Circle component draws a circular shape on the map defined by a center point and radius. Both Circle and CircleF are available - they are functionally identical.
Props
options
google.maps.CircleOptions
Circle options object.
center
google.maps.LatLng | google.maps.LatLngLiteral
The center point of the circle.
The radius of the circle in meters.
Whether the circle can be dragged.
Whether the circle is editable by users.
Whether the circle is visible.
Event Handlers
onClick
(e: google.maps.MapMouseEvent) => void
Fired when the circle is clicked.
onDblClick
(e: google.maps.MapMouseEvent) => void
Fired when the circle is double-clicked.
onDrag
(e: google.maps.MapMouseEvent) => void
Fired repeatedly while the circle is being dragged.
onDragEnd
(e: google.maps.MapMouseEvent) => void
Fired when dragging the circle ends.
onDragStart
(e: google.maps.MapMouseEvent) => void
Fired when the user starts dragging the circle.
onMouseDown
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is pressed on the circle.
onMouseMove
(e: google.maps.MapMouseEvent) => void
Fired when the mouse moves over the circle.
onMouseOut
(e: google.maps.MapMouseEvent) => void
Fired when the mouse leaves the circle area.
onMouseOver
(e: google.maps.MapMouseEvent) => void
Fired when the mouse enters the circle area.
onMouseUp
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is released on the circle.
onRightClick
(e: google.maps.MapMouseEvent) => void
Fired when the circle is right-clicked.
Fired when the circle’s center changes.
Fired when the circle’s radius changes.
Lifecycle Callbacks
onLoad
(circle: google.maps.Circle) => void
Called when the circle instance has loaded.
onUnmount
(circle: google.maps.Circle) => void
Called when the component unmounts.
Example
import { GoogleMap, Circle } from '@react-google-maps/api';
function MyMap() {
const center: google.maps.LatLngLiteral = { lat: 40.7128, lng: -74.0060 };
return (
<GoogleMap
center={center}
zoom={12}
mapContainerStyle={{ width: '100%', height: '400px' }}
>
<Circle
center={center}
radius={5000}
options={{
fillColor: '#00FF00',
fillOpacity: 0.35,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
}}
editable
onRadiusChanged={() => console.log('Radius changed')}
/>
</GoogleMap>
);
}
