1 | # Requires React 16.8+
|
2 |
|
3 | Underlying React hook that can be used for a fine-grained approach instead of opinionated [LoadScriptNext](#loadscriptnext).
|
4 |
|
5 | It's the alternative variant of LoadScript that tries to solve the problem of "google is not defined" error by removing the cleanup routines ([read more](https://github.com/JustFly1984/react-google-maps-api/pull/143)).
|
6 |
|
7 | ```js static
|
8 | import React from 'react'
|
9 | import { GoogleMap, useLoadScript } from '@react-google-maps/api'
|
10 |
|
11 | const options = {
|
12 | zoomControlOptions: {
|
13 | position: google.maps.ControlPosition.RIGHT_CENTER // ,
|
14 | // ...otherOptions
|
15 | }
|
16 | }
|
17 |
|
18 | function MyComponent() {
|
19 | const { isLoaded, loadError } = useLoadScript({
|
20 | googleMapsApiKey: "YOUR_API_KEY" // ,
|
21 | // ...otherOptions
|
22 | })
|
23 |
|
24 | const renderMap = () => {
|
25 | // wrapping to a function is useful in case you want to access `window.google`
|
26 | // to eg. setup options or create latLng object, it won't be available otherwise
|
27 | // feel free to render directly if you don't need that
|
28 | const onLoad = React.useCallback(
|
29 | function onLoad (mapInstance) {
|
30 | // do something with map Instance
|
31 | }
|
32 | )
|
33 | return <GoogleMap
|
34 | options={options}
|
35 | onLoad={onLoad}
|
36 | >
|
37 | {
|
38 | // ...Your map components
|
39 | }
|
40 | </GoogleMap>
|
41 | }
|
42 |
|
43 | if (loadError) {
|
44 | return <div>Map cannot be loaded right now, sorry.</div>
|
45 | }
|
46 |
|
47 | return isLoaded ? renderMap() : <Spinner />
|
48 | }
|
49 | ```
|