---
name: Rectangle
---

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

# Rectangle

```jsx

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

  <GoogleMap
    id="rectangle-example"
    mapContainerStyle={{
      height: "400px",
      width: "800px"
    }}
    zoom={2.5}
    center={{
      lat: -25.363,
      lng: 131.044
    }}
  >

    <Rectangle
      bounds={{
        north: 38.685,
        south: 33.671,
        east: -115.234,
        west: -118.251
      }}
    />

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

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

          <Rectangle
            bounds={{
              north: 38.685,
              south: 33.671,
              east: -115.234,
              west: -118.251
            }}
          />

        </GoogleMap>
      </LoadScript>
    )

}

</WithApiKey>