我收到此错误“ TypeError：无法读取未定义的属性'maps'”，它表明此行有问题

controlPosition={google.maps.ControlPosition.TOP_LEFT}

有我的代码。请帮忙!!!

import React from "react";
const _ = require("lodash");
const { compose,withProps,lifecycle } = require("recompose");
const {
  withScriptjs,withGoogleMap,GoogleMap,Marker,google,} = require("react-google-maps");
const { SearchBox } = require("react-google-maps/lib/components/places/SearchBox");

const SimpleMap = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=MY_KEY&v=3.exp&libraries=geometry,drawing,places",loadingElement: <div style={{ height: `200%` }} />,containerElement: <div style={{ height: `500px` }} />,mapelement: <div style={{ height: `100%` }} />,}),lifecycle({
    componentWillMount() {
      const refs = {}

      this.setState({
        bounds: null,center: {
          lat: 34.4208,lng: -119.6982 
        },markers: [],onmapMounted: ref => {
          refs.map = ref;
        },onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),center: refs.map.getcenter(),})
        },onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();
          const bounds = new google.maps.LatLngBounds();

          places.forEach(place => {
            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport)
            } else {
              bounds.extend(place.geometry.location)
            }
          });
          const nextMarkers = places.map(place => ({
            position: place.geometry.location,}));
          const nextCenter = _.get(nextMarkers,'0.position',this.state.center);

          this.setState({
            center: nextCenter,markers: nextMarkers,});
          // refs.map.fitBounds(bounds);
        },})
    },withScriptjs,withGoogleMap
)(props =>
  <GoogleMap
    ref={props.onmapMounted}
    defaultzoom={15}
    center={props.center}
    onBoundsChanged={props.onBoundsChanged}
  >
    <SearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      controlPosition={google.maps.ControlPosition.TOP_LEFT}
      onPlacesChanged={props.onPlacesChanged}
    >
      <input
        type="text"
        placeholder="Customized your placeholder"
        style={{
          boxSizing: `border-box`,border: `1px solid transparent`,width: `240px`,height: `32px`,marginTop: `27px`,padding: `0 12px`,borderRadius: `3px`,boxShadow: `0 2px 6px rgba(0,0.3)`,fontSize: `14px`,outline: `none`,textOverflow: `ellipses`,}}
      />
    </SearchBox>
    {props.markers.map((marker,index) =>
      <Marker key={index} position={marker.position} />
    )}
  </GoogleMap>
);
export default SimpleMap;