Recenter view on button click does not work

[JoppeMeijers]

i am using google-maps-react-markers which is a great library. The problem is that if I set a defaultCenter the map works correctly. only now I would like to move the view to other coordinates by clicking a button. The view then remains at the defaultCenter coordinates and therefore does not shift to the correct coordinates.

In the documentation I read that you have to replace defaultCenter to center in order to do this. only then I get the following error:

TypeError: Cannot read properties of null (reading 'getNorthEast')

and then the map is not visible, can someone help me with the right solution?

my code:

  const [DefaultCenter, setDefaultCenter] = useState({ lat: 52.0885534, lng: 6.2159387 })
  const [DefaultZoom, setDefaultZoom] = useState(7)
<GoogleMap
			apiKey="API_KEY"
			defaultCenter={{ lat: 52.0885534, lng: 6.2159387}}
			defaultZoom={7}
			options={mapOptions}
			mapMinHeight="800px"
                         center={DefaultCenter}
                          zoom={DefaultZoom}
                        onGoogleApiLoaded={onGoogleApiLoaded}
					
				>
					{Business.map(({ lat, lng, name }, index) => (
						<Marker key={index} lat={lat} lng={lng} markerId={name} onClick={onMarkerClick} className="marker" />
					))}


				</GoogleMap>

[giorgiabosello]

Hi @JoppeMeijers. Center and Zoom are not managed in this way. You should change them by using the methods in map ref.
Example:

const zoom = {
    default: 13,
    in: 20,
}
    
const onMarkerClick = (business) => {
    mapRef.current.setCenter(business.coordinates)
    mapRef.current.setZoom(zoom.in)
}

[JoppeMeijers]

it works great, thanks for your quick response!

[fandy-vitex]

wow, that works, thanks @giorgiabosello 👍