reactjs - React のジオロケーション、react-google-maps を使用

Question

react-google-maps で defaultCenter を変更するには? 位置情報を見つけて、デフォルト値の緯度と経度を変更する必要があります。

import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const getLocation = () =>{
   const pos = {};
   const geolocation = navigator.geolocation;
   if (geolocation) {
      geolocation.getCurrentPosition(findLocal, showEror);
   }
   function findLocal(position){
      pos.lat = position.coords.latitude;
      pos.lng = position.coords.longitude;
   }
   function showEror(){console.log(Error)}
   return pos;
};
const myLocation = getLocation(); // object has lat and lng

次に、コンポーネント MapWithAMarker にデータを転送する必要があります: Сenter={myLocation} および Marker position={myLocation}

class GoogleMapCenter extends React.Component{
    render(){  
    const MapWithAMarker = withScriptjs(withGoogleMap(props =>
        <GoogleMap
            defaultZoom={10}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}>
            {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
        </GoogleMap>
    ));

    return(
        <MapWithAMarker
            isMarkerShown
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
        />
    )
  }
}
export default GoogleMapCenter;

this.props を使用すると、機能しません。

 <MapWithAMarker
            center={this.props.myLocation}
            position={this.props.myLocation}
            isMarkerShown
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
        />

また

        <GoogleMap
            defaultZoom={10}
            defaultCenter={this.props.myLocation}>
            {props.isMarkerShown && <Marker position={this.props.myLocation} />}
        </GoogleMap>