GoogleMapApiLoader

<GoogleMapApiLoader /> component is used for load the Google Maps API.

Basic Example

function App() {
  return (
    <Suspense fallback={...}>
      <GoogleMapApiLoader
        apiKey='YOUR_API_KEY'
        suspense
      >
        {/* You can create map here */}
        <MyMap />
      </GoogleMapApiLoader>
    </Suspense>
  );
}

// or
function App() {
  const loadingStatus = useApiLoadingStatus();

  return (
    <GoogleMapApiLoader
      apiKey='YOUR_API_KEY'
    >
      {
        loadingStatus === LoadingStatus.SUCCESS && (
          // You can create map here
          <MyMap />
        )
      }
    </GoogleMapApiLoader>
  );
}

Props

Props	Type	Description
apiKey	string	Your Google Maps API Key
suspense	boolean	flag for using suspense
onSuccess	(core: google.maps.CoreLibrary) => void	callback for loading success
onFailure	(reason: unknown) => void	callback for loading failure
v	string	Please refer to the official documentation.
libraries	string | string[]	…
language	string	…
region	string	…
authReferrerPolicy	string	…

Loading Status

You can use useApiLoadingStatus hooks to get the loading status.

Legacy script loading tag

If you’re using the legacy script loading tag, you don’t need to use this component.