---
name: Shapes
---

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

# Shapes

```jsx

const BRISBANE_COORDS = [
  { lat: -27.467, lng: 153.027 },
  { lat: -23.467, lng: 152.027 },
  { lat: -28.567, lng: 149.627 },
  { lat: -27.467, lng: 153.027 }
]

const SAN_FRANCISCO_COORDS = [
  { lat: 37.772, lng: -122.214 },
  { lat: 39.772, lng: -121.214 },
  { lat: 35.772, lng: -120.214 },
  { lat: 37.772, lng: -122.214 }
]


const brisbanePolygonOptions = {
  fillColor: '#00FF00',
  fillOpacity: 1,
  strokeColor: '#22FF22',
  strokeOpacity: 1,
  strokeWeight: 2,
  clickable: false,
  draggable: false,
  editable: false,
  geodesic: false,
  paths: BRISBANE_COORDS,
  zIndex: 1
}

const sfPolygonOptions = {
  fillColor: '#FF5500',
  fillOpacity: 1,
  strokeColor: '#FF7700',
  strokeOpacity: 1,
  strokeWeight: 2,
  clickable: false,
  draggable: false,
  editable: false,
  geodesic: false,
  paths: SAN_FRANCISCO_COORDS,
  zIndex: 1
}

const RECTANGLE_BOUNDS = {
  north: 38.685,
  south: 33.671,
  east: -115.234,
  west: -118.251
}

const POLYLINE_OPTIONS = {
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
}

const FLIGHT_PLAN_COORDS = [
  { lat: 37.772, lng: -122.214 },
  { lat: 21.291, lng: -157.821 },
  { lat: -18.142, lng: 178.431 },
  { lat: -27.467, lng: 153.027 }
]

const circleOptions = {
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  center: {
    lat: 34.052,
    lng: -118.243
  },
  radius: 300000,
  clickable: false,
  draggable: false,
  editable: false,
  visible: true,
  zIndex: 1
}


<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="basic-map-example"
    mapContainerStyle={{
      height: "400px",
      width: "800px"
    }}
    zoom={2}
    center={{
      lat: 0,
      lng: -180
    }}
  >
    <Polyline
      path={FLIGHT_PLAN_COORDS}
      options={polylineOptions}
    />

    <Polygon
      path={BRISBANE_COORDS}
      options={brisbanePolygonOptions}
    />

    <Polygon
      path={SAN_FRANCISCO_COORDS}
      options={sfPolygonOptions}
    />

    <Rectangle
      bounds={RECTANGLE_BOUNDS}
    />

    <Circle
      options={circleOptions}
    />
  </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="shapes-example"
          mapContainerStyle={{
            height: "400px",
            width: "800px"
          }}
          zoom={2}
          center={{
            lat: 0,
            lng: -180
          }}
        >
        <Polyline
          path={[
          { lat: 37.772, lng: -122.214 },
          { lat: 21.291, lng: -157.821 },
          { lat: -18.142, lng: 178.431 },
          { lat: -27.467, lng: 153.027 }
          ]}
          options={{
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          }}
        />

        <Polygon
          path={[
            { lat: -27.467, lng: 153.027 },
            { lat: -23.467, lng: 152.027 },
            { lat: -28.567, lng: 149.627 },
            { lat: -27.467, lng: 153.027 }
          ]}
          options={{
            fillColor: '#00FF00',
            fillOpacity: 1,
            strokeColor: '#22FF22',
            strokeOpacity: 1,
            strokeWeight: 2,
            clickable: false,
            draggable: false,
            editable: false,
            geodesic: false,
            zIndex: 1
          }}
        />

        <Polygon
          path={[
            { lat: 37.772, lng: -122.214 },
            { lat: 39.772, lng: -121.214 },
            { lat: 35.772, lng: -120.214 },
            { lat: 37.772, lng: -122.214 }
          ]}
          options={{
            fillColor: '#FF5500',
            fillOpacity: 1,
            strokeColor: '#FF7700',
            strokeOpacity: 1,
            strokeWeight: 2,
            clickable: false,
            draggable: false,
            editable: false,
            geodesic: false,
            zIndex: 1
          }}
        />

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

        <Circle
        radius={300000}
        center={{
          lat: 34.052,
          lng: -118.243
        }}
        options={{
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          clickable: false,
          draggable: false,
          editable: false,
          visible: true,
          zIndex: 1
        }}
        />

        </GoogleMap>
      </LoadScript>
    )

}

</WithApiKey>