BLUE

Navigation

Breadcrumbs

Upload

Tip: You can also drag & drop files anywhere on this page to upload.

Edit File Size: 1.37 KB

/var/www/sitesecurity.bitkit.dk/httpdocs/node_modules/@react-google-maps/api/src/useJsApiLoader.md

Text Base64

# Requires React 16.8+

React hook based on new official way to load googlemaps script.

It's the alternative variant of LoadScript and useLoadScript hook 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)).

```js static
import { useCallback } from 'react'
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'

const options = {
  zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER // 'right-center' ,
    // ...otherOptions
  }
}

function MyComponent() {
  const { isLoaded, loadError } = useJsApiLoader({
    googleMapsApiKey: "YOUR_API_KEY" // ,
    // ...otherOptions
  })

const renderMap = () => {
    // wrapping to a function is useful in case you want to access `window.google`
    // to eg. setup options or create latLng object, it won't be available otherwise
    // feel free to render directly if you don't need that
    const onLoad = useCallback(
      function onLoad (mapInstance) {
        // do something with map Instance
      }
    )
    return <GoogleMap
      options={options}
      onLoad={onLoad}
    >
      {
        // ...Your map components
      }
    </GoogleMap>
  }

if (loadError) {
    return <div>Map cannot be loaded right now, sorry.</div>
  }

return isLoaded ? renderMap() : <Spinner />
}
```

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Name	Size	Perms	Modified	Actions
components DIR	-	drwxr-xr-x	2026-04-28 09:11:40	Edit Download recursive recursive
docs DIR	-	drwxr-xr-x	2026-04-28 09:11:40	Edit Download recursive recursive
utils DIR	-	drwxr-xr-x	2026-04-28 09:11:40	Edit Download recursive recursive
__tests__ DIR	-	drwxr-xr-x	2026-04-28 09:11:40	Edit Download recursive recursive
GoogleMap.md	939 B	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
GoogleMap.stories.tsx	829 B	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
GoogleMap.tsx	16.12 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
index.ts	3.56 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
LoadScript.tsx	6.24 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
LoadScriptNext.md	198 B	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
LoadScriptNext.tsx	1.29 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
map-context.ts	479 B	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
setup-tests.js	8.56 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
types.tsx	270 B	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
useGoogleMap.md	275 B	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
useJsApiLoader.md	1.37 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
useJsApiLoader.tsx	2.71 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
useLoadScript.md	1.39 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
useLoadScript.tsx	3.50 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive

Directory Contents