Google map coordinates in react - reactjs

Question

I'm trying to get the current position on google map. The code is working fine when I get the coordinates, but these coordinates I want to get and google map toom because right now, coordinates are static for google map.
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import { withGoogleMap, GoogleMap, Marker } from "google-map-react"
import { InfoWindow } from 'google-map-react';
import Geolocation from 'react-geolocation'
const AnyReactComponent = ({ text }) => <div>{ text }</div>;
export default class Map extends Component {
static defaultProps = {
center: { lat: 40.7446790, lng: -73.9485420 },
zoom: 11
}
render() {
return (
<Geolocation
render={({
fetchingPosition,
position: { coords: { latitude, longitude } = {} } = {},
error,
getCurrentPosition
}) =>
<div>
<button onClick={getCurrentPosition}>Get Position</button>
{error &&
<div>
{error.message}
</div>}
<pre>
latitude: {latitude}
longitude: {longitude}
</pre>
<div className='google-map' style={{ height: '80vh', width: '100%' }}>
<GoogleMapReact
defaultCenter={ this.props.center }
defaultZoom={ this.props.zoom }>
<AnyReactComponent
lat={ latitude }
lng={ longitude }
text={ 'Wheres Waldo?' }
/>
</GoogleMapReact>
</div>
</div>}
/>
)
}
}
With Geolocation I get very well coordinates, but these coordinates want to set in:
static defaultProps = {
center: { lat: 40.7446790, lng: -73.9485420 },
zoom: 11
}

Answer 1

You must define a state for your <Map> component, which will store your current coordinates.
Then, you should pass the state to your GoogleMapReact component.
In order to set the state with the coordinates found by the Geolocation services, you can use onSuccess callback (https://www.npmjs.com/package/react-geolocation#onsuccess-function):
<Geolocation
onSuccess={this.geoSuccess}
...
/>
The geoSuccess function is:
geoSuccess = position => {
let coords = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
this.setState({
center: coords
})
};
Demo here:
https://43qv620770.codesandbox.io/
The full code can be found here (the file Map.js):
https://codesandbox.io/s/43qv620770