---
name: Polygon
---

import { GoogleMap, LoadScript, Polygon } from "../../lib";
import WithApiKey from "./WithApiKey";

# Polygon

```jsx

const SYDNEY_COORDS = [
  { lat: -33.858, lng: 151.213 },
  { lat: -33.859, lng: 151.222 },
  { lat: -33.866, lng: 151.215 }
]

const sydneyPolygonOptions = {
  fillColor: 'lightblue',
  fillOpacity: 1,
  strokeColor: 'red',
  strokeOpacity: 1,
  strokeWeight: 2,
  clickable: false,
  draggable: false,
  editable: false,
  geodesic: false,
  paths: SYDNEY_COORDS,
  zIndex: 1
}

<LoadScript
  id="script-loader"
  googleMapsApiKey={API_KEY}
  language={"en"}
  region={"EN"}
  version={"weekly"}
  onLoad={() => console.log("script loaded")}
  loadingElement={<div>Loading...</div>}>

  <GoogleMap
    id="basic-map-example"
    mapContainerStyle={{
      height: "400px",
      width: "800px"
    }}
    zoom={13}
    center={{
      lat: -33.861,
      lng: 151.217
    }}
  >

    <Polygon
      path={SYDNEY_COORDS}
      options={sydneyPolygonOptions}
    />

  </GoogleMap>
</LoadScript>
```

<WithApiKey>
  {
    (apiKey) => (
      <LoadScript
        id="script-loader"
        googleMapsApiKey={apiKey}
        language={"en"}
        region={"EN"}
        version={"weekly"}
        onLoad={() => console.log("script loaded")}
        loadingElement={<div>Loading...</div>}>

        <GoogleMap
          id="basic-map-example"
          mapContainerStyle={{
            height: "400px",
            width: "800px"
          }}
          zoom={13}
          center={{
            lat: -33.861,
            lng: 151.217
          }}
        >

        <Polygon
          path={[
            { lat: -33.858, lng: 151.213 },
            { lat: -33.859, lng: 151.222 },
            { lat: -33.866, lng: 151.215 }
          ]}
          options={{
            fillColor: 'lightblue',
            fillOpacity: 1,
            strokeColor: 'red',
            strokeOpacity: 1,
            strokeWeight: 2,
            clickable: false,
            draggable: false,
            editable: false,
            geodesic: false,
            zIndex: 1
          }}
        />

        </GoogleMap>
      </LoadScript>
    )

}

</WithApiKey>