---
name: GoogleMap
route: "/"
---

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

# GoogleMap

```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="basic-map-example"
    mapContainerStyle={{
      height: "400px",
      width: "800px"
    }}
    zoom={8}
    center={{
      lat: -34.397,
      lng: 150.644
    }}
  />
</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={8}
        center={{
          lat: -34.397,
          lng: 150.644
        }}
      />
    </LoadScript>
  )}
</WithApiKey>