React Google Maps API (ReferenceError: google is not defined)

Question

I'm using react-google-maps/api node module. I need to set the value of zoomControlOptions is TOP_LEFT but I ended up getting this error Uncaught ReferenceError: google is not defined. Here is the link to the repo.

I'm getting the error here

const options = {
  zoomControl: true,
  mapTypeControl: false,
  minZoom: 2,
  streetViewControl: false,
  zoomControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT, // google is undefined here
  },
};

Please help me :)

Answer 1

This happens because you are rendering the Google Map before it's loaded.

Instead of using LoadScript, use useJsApiLoader.

import {
  GoogleMap,
  MarkerF,
  useJsApiLoader,
} from "@react-google-maps/api";


function RenderMap() {
  const { isLoaded } = useJsApiLoader({ googleMapsApiKey });
  if (!isLoaded) {
    return null;
  }
  // google is guaranteed to be defined now
  return <GoogleMap>...</GoogleMap>
}

useJsApiLoader has the following type signature:

declare function useJsApiLoader({ id, version, nonce, googleMapsApiKey, language, region, libraries, preventGoogleFontsLoading, mapIds, authReferrerPolicy, }: UseLoadScriptOptions): {
    isLoaded: boolean;
    loadError: Error | undefined;
};

Answer 2

Try defining google variable explicitly like this:

const google = window.google;

Also, you may read out this answer as well