useMap always return null for me about react-google-maps

[usefulthink]

Do you have a code-snippet for me? useMap returns null if it is used outside the APIProvider component (since it can't lookup map-instances in that case) or when the map with the specified id can't be found (currently, not specifying an id will use the id "default", which is also used by the map if you don't specify the id prop).

See: https://github.com/visgl/react-google-maps/blob/main/src/hooks/use-map.ts

[yestoall]

i'm using it inside de APIProvider

import { useEffect } from "react"
import { APIProvider, Map, useMap } from "@vis.gl/react-google-maps"

export default function Mapa() {
  const mapa = useMap()

  useEffect(() => {
    console.log("mapa *", mapa)
  }, [mapa])

  // ...

  return (
    <APIProvider apiKey="...mykey">
      <Map
        mapId="rutas"
        mapTypeId="terrain" 
        ...
      ></Map>
    </APIProvider>
  )
}

[yestoall]

the console.log is always returnig null

[usefulthink]

Here's the problem: useMap isn't actually called inside the APIProvider, the APIProvider is rendered as a child of your Mapa component.

I would recommend to place the APIProvider outside of this component, could be as far up as your App or page component. It doesn't impact the rest of the application in any way.

The alternative would be to place the component using the hook into a child-component like this:

function SomethingWithMapHook() {
  const map = useMap();
  useEffect(() =>{
    if (!map) return;

    // whatever you need to do with the map
  }, [map])

  return <>whatever</>;
}

export default function Mapa() {
  const mapa = useMap()

  useEffect(() => {
    console.log("mapa *", mapa)
  }, [mapa])

  // ...

  return (
    <APIProvider apiKey="...">
      <Map {...mapProps}>
        ...
      </Map>
      <SomethingWithMapHook />
    </APIProvider>
  )
}

[yestoall]

ohhhh thanks.... i understand now

it works perfect

great work, and great help

[usefulthink]

You're welcome!