How to re-center when clicking on a marker?

[stesvis]

Hello, I am unable to do this, it's probably simple but I can't figure it out.

After the map is loaded, with markers, when I click on a marker I would like to re-center the map to the position of that marker. How can I do that?

Thanks.

[Dastari]

You want to have a state to store your map reference:

const [map, setMap] = useState()

Then on your onLoad in the map:

<GoogleMap
 .....
onLoad={(map) => setMap(map)} />

Then in your marker:

<Marker
position={position}
onClick={() => map.setCenter(position)} />

Here's a quick example of how to do it:

https://codesandbox.io/s/example-pin-click-to-center-74fpe9