useGoogleMap() returns undefined

[ktranish]

import {
  GoogleMapsProvider,
  useGoogleMap,
} from "@ubilabs/google-maps-react-hooks";
import { useCallback, useEffect, useState } from "react";

export default function Example() {
  const map = useGoogleMap();
  const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
  const mapRef = useCallback((node: HTMLDivElement) => {
    node && setMapContainer(node);
  }, []);
  const mapOptions = {
    center: { lat: 59.27240992362248, lng: 15.213029186736854 },
    zoom: 16,
  };
  useEffect(() => {
    console.log(map); //undefined
  }, [map]);
  return (
    <GoogleMapsProvider
      googleMapsAPIKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string}
      mapContainer={mapContainer}
      mapOptions={mapOptions}
    >
      <div ref={mapRef} className="h-96 w-full rounded-lg"></div>
    </GoogleMapsProvider>
  );
}

[ktranish]

Simple hooks like this aren't even usable. I wouldn't recommend this library to anyone trying it out. Don't waste your time on this and start looking for alternatives - https://www.npmjs.com/package/@react-google-maps/api

[yfr]

@nytrek The hooks can only be used when the provider is initialized. And then only in the child components of said provider. So your example code is lacking the right setup. Please have a look at the example in the README on the repos' homepage, right where you started.

RTFM, thanks!

[sultanularefin]

I find this package underrated and working very well in one of my React project(TypeScript) with parcel bundler, but not working in a nextjs(javaScript, not typeScript) project, both having same react version:

"next": "^14.0.4",
"react": "^18.2.0",