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;