Skip to main content

​
Polygon / PolygonF

The Polygon component draws a closed shape consisting of a series of connected coordinates on the map. Both Polygon and PolygonF are available - they are functionally identical.

​
Props

​
options
google.maps.PolygonOptions
Polygon options object.
​
path
google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]
The ordered sequence of coordinates that designates a closed loop.
​
paths
google.maps.MVCArray<google.maps.LatLng> | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[] | google.maps.LatLng[][] | google.maps.LatLngLiteral[] | google.maps.LatLngLiteral[][]
The paths property may be used to define complex shapes with holes.
​
draggable
boolean
Whether the polygon can be dragged.
​
editable
boolean
Whether the polygon is editable by users.
​
visible
boolean
Whether the polygon is visible.

​
Event Handlers

​
onClick
(e: google.maps.MapMouseEvent) => void
Fired when the polygon is clicked.
​
onDblClick
(e: google.maps.MapMouseEvent) => void
Fired when the polygon is double-clicked.
​
onDrag
(e: google.maps.MapMouseEvent) => void
Fired repeatedly while the polygon is being dragged.
​
onDragEnd
(e: google.maps.MapMouseEvent) => void
Fired when dragging the polygon ends.
​
onDragStart
(e: google.maps.MapMouseEvent) => void
Fired when the user starts dragging the polygon.
​
onMouseDown
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is pressed on the polygon.
​
onMouseMove
(e: google.maps.MapMouseEvent) => void
Fired when the mouse moves over the polygon.
​
onMouseOut
(e: google.maps.MapMouseEvent) => void
Fired when the mouse leaves the polygon area.
​
onMouseOver
(e: google.maps.MapMouseEvent) => void
Fired when the mouse enters the polygon area.
​
onMouseUp
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is released on the polygon.
​
onRightClick
(e: google.maps.MapMouseEvent) => void
Fired when the polygon is right-clicked.
​
onEdit
(polygon: google.maps.Polygon) => void
Fired when the polygon’s path is edited (vertex inserted, moved, or removed).

​
Lifecycle Callbacks

​
onLoad
(polygon: google.maps.Polygon) => void
Called when the polygon instance has loaded.
​
onUnmount
(polygon: google.maps.Polygon) => void
Called when the component unmounts.

​
Example

import { GoogleMap, Polygon } from '@react-google-maps/api';

function MyMap() {
  const path: google.maps.LatLngLiteral[] = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7580, lng: -73.9855 },
    { lat: 40.7489, lng: -73.9680 },
    { lat: 40.7128, lng: -73.9855 },
  ];

  return (
    <GoogleMap
      center={path[0]}
      zoom={12}
      mapContainerStyle={{ width: '100%', height: '400px' }}
    >
      <Polygon
        path={path}
        options={{
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
        }}
        editable
        onEdit={(polygon) => console.log('Path edited', polygon.getPath())}
      />
    </GoogleMap>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us