Minimal useMap() example?

[jezmck]

I've read the docs and a few related discussions, but I am still struggling to understand how to use useMap().
Some things say it can only be used by a component which is a sibling of the Map, some say the APIProvider.

Could we please have a minimal example in the docs?

My particular use-case is to adjust the bounds to reveal all the AdvancedMarkers I've added; https://trackers.jezmck.com/

[usefulthink]

So you can essentially use the useMap hook pretty much everywhere.
The only thing you can't do is using it outside of the APIProvider.

So this will not work:

const App = () => {
  // the hook is being used outside of the APIProvider, so it can't 
  // look up any map instances etc. (this will also log an error to the console)
  const map = useMap();

  return (
    <APIProvider>
        <Map {...mapProps} />
    </APIProvider>
  );
};

This is why we recommend putting the APIProvider somewhere at the top-level of the application or page that uses the Google Maps API. In your case, I'd recommend something like this (schematic implementation, off the top of my head):

const App = () => {
  return (
    <APIProvider>
        <CustomMap />
    </APIProvider>
  );
};

const CustomMap = () => {
  const markerLocations = [/* whatever you need to get those... */];
  const map = useMap();
  
  const fitMapToToMarkers = useCallback(() => {
    if (!map) return;

    const bounds = new google.maps.LatLngBounds();
    for (const latLng of markerLocations) {
        bounds.extend(latLng);
    }
    map.fitBounds(bounds);
  }, [map]);

  // decide how you want to trigger `fitMapToMarkers`, via a button, when data changes, ...

  return (
    <Map {...mapProps}>
        {markerLocations.map(latLng => (<AdvancedMarker location={latLng} />))}
    </Map>
  );
};

[jezmck]

Thank you! I've made that change but I now always get null for the map, and wonder whether it's because I'm using AdvancedMarkers and hence have to use an ID for the Map?

[usefulthink]

oh damn... That's a mistake that had to happen at some point.

The <Map id='some-id'> and mapId are completely separate concepts, the first id can be used for the useMap hook to find your map if there's more than one map and that map isn't a parent component, and the mapId is the thing you get for the cloud-based map styling (that's the one you need when you want to use AdvancedMarkers).

If you only have a single map, you don't need to set the id prop (it will internally use the id default).

[jezmck]

Well that is confusing!

This is where it gets weird...
My code now works if I set a mapId but not if I set an id.

[usefulthink]

As for the request for documentation, can you elaborate what we could do to improve the documentation here: https://visgl.github.io/react-google-maps/docs/api-reference/hooks/use-map ?

[jezmck]

Perhaps a complete example which uses useMap('some_id') would be useful?