1 | # Google Map example
|
2 |
|
3 | ```jsx
|
4 | const { LoadScript } = require("./LoadScript");
|
5 | const ScriptLoaded = require("./docs/ScriptLoaded").default;
|
6 |
|
7 | <ScriptLoaded>
|
8 | <GoogleMap
|
9 | id="circle-example"
|
10 | mapContainerStyle={{
|
11 | height: "400px",
|
12 | width: "800px"
|
13 | }}
|
14 | zoom={7}
|
15 | center={{
|
16 | lat: -3.745,
|
17 | lng: -38.523
|
18 | }}
|
19 | />
|
20 | </ScriptLoaded>;
|
21 | ```
|
22 |
|
23 | ## Map instance
|
24 |
|
25 | To access map instance (eg. to pan the map imperatively), you can utilize the `onLoad` prop of GoogleMap component.
|
26 |
|
27 | The GoogleMap component uses React Context internally to pass the map instance around. For the convenience the value is exposed with hook `useGoogleMap` (**_requires React 16.8+_**).
|
28 |
|
29 | ```js static
|
30 | import React from 'react'
|
31 | import { useGoogleMap } from '@react-google-maps/api'
|
32 |
|
33 | function PanningComponent() {
|
34 | const map = useGoogleMap()
|
35 |
|
36 | React.useEffect(() => {
|
37 | if (map) {
|
38 | map.panTo(...)
|
39 | }
|
40 | }, [map])
|
41 |
|
42 | return null
|
43 | }
|
44 | ```
|