How can I reach panTo function?

[FKonyali]

When the marker is clicked, I want to focus on the position of the marker with panTo. How can we do this?

[mrMetalWood]

Something like this should do the trick:

import { useEffect, useState } from 'react';
import { Map, Marker, useMap } from '@vis.gl/react-google-maps';

function App() {
  const map = useMap();
  const [mapCenter, setMapCenter] = useState({ lat: 53.54992, lng: 10.00678 });

  useEffect(() => {
    if (!map) return;

    map.panTo(mapCenter);
  }, [mapCenter]);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Map defaultCenter={mapCenter} defaultZoom={10}>
        <Marker
          position={mapCenter}
          onClick={({latLng}) => setMapCenter(latLng)}
        />
      </Map>
    </div>
  );
}

export default App;

[FKonyali]

But map variable always returns null. So panTo function is not triggered @mrMetalWood

[FKonyali]

BTW, I also saw the bug ticket regarding this issue 249 @mrMetalWood

[mrMetalWood]

Take a look a the docs for the useMap hook here: https://visgl.github.io/react-google-maps/docs/api-reference/hooks/use-map#usage

There a two ways the useMap hook can be used at this time:

1. In a child component of the component that holds the <APIProvider>
2. In the same component as the component that holds the <APIProvider> but you have to assign an id to map and also use that id when retrieving the map from useMap

cc #249

[FKonyali]

I thought it was used in a single component. When I create a new component and use useMap in it, null does not appear. Thank you @mrMetalWood

I think the ticket opened as a bug may be returning null due to this problem.

[mrMetalWood]

Yeah #249 might be the same problem indeed.