CODEWITHSUNDEEP
next.jsreact-hooksreact-google-maps-api
sam
sam

Reputation: 65

useGoogleMap inside Next JS

Does anyone use useGoogleMap() inside NEXT JS component? It gives Unhandled Runtime Error Invariant Violation: useGoogleMap needs a GoogleMap available up in the tree error. I just need to refer to map of google Map inside Next JS.

Upvotes: 0

Views: 1388

Answers (2)

malik amanullah
malik amanullah

Reputation: 1

Yeah, when using useGoogleMap() in a Next.js component, if U run into the 'useGoogleMap needs a GoogleMap available up in the tree' error. be sure you've properly loaded the Google Maps API and passed the necessary props down to your components.

another solution is to use api:

npm install @react-google-maps/api

a sample gogle map react component will look like this:

import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '100%',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

const GoogleMapComponent = () => {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        {/* Child components like markers, overlays, etc., can be added here */}
      </GoogleMap>
    </LoadScript>
  );
};

export default GoogleMapComponent;

Upvotes: 0

Mohssine Oussama
Mohssine Oussama

Reputation: 641

you have to wrap the component that are using this hook by GoogleMap component as the documentation say:

The GoogleMap component uses React Context internally to pass the map instance around. For the convenience the value is exposed with hook useGoogleMap (requires React 16.8+).

Upvotes: 0

Related Questions