Map.js

//Example Usage of custom control
export default ({lat, lng, google}) => (
  <GoogleMap
    defaultCenter={{lat, lng}}
    defaultZoom={14}
    minZoom={6}
    google={google}
    containerStyle={{ height: '575px', width: '100%', position: 'relative' }}
  >
    <Marker position={{lat, lng}} />
    <MapControl position={google.maps.ControlPosition.BOTTOM_CENTER}>
      <div>That was easy</div>
    </MapControl>
  </GoogleMap>
)

MapControl.js

import { Component } from 'react'
import { createPortal } from 'react-dom'
import { MAP } from 'react-google-maps/lib/constants'
import PropTypes from 'prop-types'
export default class MapControl extends Component {

  static contextTypes = { [MAP]: PropTypes.object }

  componentWillMount() {
    this.map = this.context[MAP]
    this.controlDiv = document.createElement('div')
    this.map.controls[this.props.position].push(this.controlDiv)
  }
  componentWillUnmount() {
    this.map.controls[this.props.position].removeAt(this.divIndex)
  }
  render() {
    return createPortal(this.props.children, this.controlDiv)
  }
}

Implemented above example It gives an error.

Cannot read property 'ControlPosition' of undefined

Can I know what is wrong with this?

<MapControl position={google.maps.ControlPosition.BOTTOM_CENTER}> <div>That was easy</div> </MapControl>

maybe you can try replace google to window.google;
or replace google.maps.ControlPosition.BOTTOM_CENTER to 11 (not recommended)

Wrap the map component with the withScript HOC so the maps library is loaded.

With this solution, my control was "blinking" every time the map re-rendered, but this didn't happen when I used this solution instead.