react google maps make center of the map coordinates code example

Example: react google maps get map center

import React, { useState } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';
import mapStyle from './mapStyle';
const mapContainerStyle = {
  height: "300px",
  width: "100%"
};
const FormMap = () => {
  const [mapRef, setMapRef] = useState(null);
  const [center, setCenter] = useState({ lat: 48.1467112, lng: 17.1385319 });
  const [clickedLatLng, setClickedLatLng] = useState(null);
  return (
    <>
      <LoadScript
        id="form-map"
        googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}
        version="weekly"
      >
        <GoogleMap
          id="form-map"
          // Store a reference to the google map instance in state
          onLoad={map => setMapRef(map)}
          onClick={e => setClickedLatLng(e.latLng.toJSON())}
          zoom={14}
          center={center}
          onCenterChanged={() => setCenter(mapRef.getCenter().toJSON())}
          mapContainerStyle={mapContainerStyle}
          clickableIcons
          options={{
            disableDefaultUI: true,
            styles: mapStyle,
          }}
        >
        </GoogleMap>
      </LoadScript>
      {/* Our center position always in state */}
      <h3>
        Center {center.lat}, {center.lng}
      </h3>
      {/* Position of the user's map click */}
      {clickedLatLng && (
        <h3>
          You clicked: {clickedLatLng.lat}, {clickedLatLng.lng}
        </h3>
      )}
    </>
  )
}
export default FormMap;