Polygon

<Polygon /> component represents an area enclosed by a closed path (or loop), which is defined by a series of coordinates. for more detail, see official documentation.

Basic Example

const triangleCoords = [
  { lat: 25.774, lng: -80.19 },
  { lat: 18.466, lng: -66.118 },
  { lat: 32.321, lng: -64.757 },
];

function MyMap() {
  return (
    <GoogleMap
      className='h-[400px]'
      initialZoom={5}
      initialCenter={{ lat: 24.886, lng: -70.268 }}
      mapOptions={{
        mapTypeId: "terrain",
      }}
    >
      <Polygon
        paths={triangleCoords}
        strokeColor="#FF0000"
        strokeOpacity={0.8}
        strokeWeight={2}
        fillColor="#FF0000"
        fillOpacity={0.35}
      />
    </GoogleMap>
  );
}

Props

Props	Type	Description
paths	google.maps.MVCArray<google.maps.MVCArray<LatLng>> | google.maps.MVCArray<LatLng> | Array<Array<LatLng | LatLngLiteral>> | Array<LatLng | LatLngLiteral>	The ordered sequence of coordinates for drawing Polygon. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex.
clickable	boolean	Indicates whether this Polygon handles mouse events.
draggable	boolean	if flag is set to true, the user can drag Polygon over the map.
editable	boolean	if flag is set to true, the user can edit Polygon by dragging the control points shown at the vertices and on each segment.
fillColor	string	The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity	number	The fill opacity between 0.0 and 1.0
geodesic	boolean	if flag is set to true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth.
strokeColor	string	The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacity	number	The stroke opacity between 0.0 and 1.0.
strokePosition	google.maps.StrokePosition	The stroke position.
strokeWeight	number	The stroke width in pixels.
visible	boolean	Whether this polygon is visible on the map.
zIndex	number	zIndex for Polygon
onClick	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for click event. Please refer to the official documentation.
onContextmenu	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for contextmenu event. Please refer to the official documentation.
onDblClick	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for dblclick event. Please refer to the official documentation.
onDrag	(polygon: google.maps.Polygon, event: google.maps.MapMouseEvent) => void;	callback for drag event. Please refer to the official documentation.
onDragEnd	(polygon: google.maps.Polygon, event: google.maps.MapMouseEvent) => void;	callback for dragend event. Please refer to the official documentation.
onDragStart	(polygon: google.maps.Polygon, event: google.maps.MapMouseEvent) => void;	callback for dragstart event. Please refer to the official documentation.
onMouseDown	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for mousedown event. Please refer to the official documentation.
onMouseMove	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for mousemove event. Please refer to the official documentation.
onMouseOut	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for mouseout event. Please refer to the official documentation.
onMouseOver	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for mouseover event. Please refer to the official documentation.
onMouseUp	(polygon: google.maps.Polygon, event: google.maps.PolyMouseEvent) => void;	callback for mouseup event. Please refer to the official documentation.