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;