Rectangle / RectangleF
The Rectangle component draws a rectangular shape on the map defined by geographic bounds. Both Rectangle and RectangleF are available - they are functionally identical.
Props
options
google.maps.RectangleOptions
Rectangle options object.
bounds
google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral
The bounds that define the rectangle.
Whether the rectangle can be dragged.
Whether the rectangle is editable by users.
Whether the rectangle is visible.
Whether the rectangle is clickable.
Event Handlers
onClick
(e: google.maps.MapMouseEvent) => void
Fired when the rectangle is clicked.
onDblClick
(e: google.maps.MapMouseEvent) => void
Fired when the rectangle is double-clicked.
onDrag
(e: google.maps.MapMouseEvent) => void
Fired repeatedly while the rectangle is being dragged.
onDragEnd
(e: google.maps.MapMouseEvent) => void
Fired when dragging the rectangle ends.
onDragStart
(e: google.maps.MapMouseEvent) => void
Fired when the user starts dragging the rectangle.
onMouseDown
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is pressed on the rectangle.
onMouseMove
(e: google.maps.MapMouseEvent) => void
Fired when the mouse moves over the rectangle.
onMouseOut
(e: google.maps.MapMouseEvent) => void
Fired when the mouse leaves the rectangle area.
onMouseOver
(e: google.maps.MapMouseEvent) => void
Fired when the mouse enters the rectangle area.
onMouseUp
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is released on the rectangle.
onRightClick
(e: google.maps.MapMouseEvent) => void
Fired when the rectangle is right-clicked.
Fired when the rectangle’s bounds change.
Lifecycle Callbacks
onLoad
(rectangle: google.maps.Rectangle) => void
Called when the rectangle instance has loaded.
onUnmount
(rectangle: google.maps.Rectangle) => void
Called when the component unmounts.
Example
import { GoogleMap, Rectangle } from '@react-google-maps/api';
function MyMap() {
const bounds: google.maps.LatLngBoundsLiteral = {
north: 40.7580,
south: 40.7128,
east: -73.9680,
west: -74.0060,
};
return (
<GoogleMap
center={{ lat: 40.7354, lng: -73.9870 }}
zoom={12}
mapContainerStyle={{ width: '100%', height: '400px' }}
>
<Rectangle
bounds={bounds}
options={{
fillColor: '#0000FF',
fillOpacity: 0.35,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
}}
editable
onBoundsChanged={() => console.log('Bounds changed')}
/>
</GoogleMap>
);
}
