diff --git a/lib/components/InfoWindow.js b/lib/components/InfoWindow.js
index dc443b97..b6966934 100644
--- a/lib/components/InfoWindow.js
+++ b/lib/components/InfoWindow.js
@@ -107,17 +107,6 @@ var InfoWindow = (exports.InfoWindow = (function(_React$PureComponent) {
   }
 
   ;(0, _createClass3.default)(InfoWindow, [
-    {
-      key: "componentWillMount",
-      value: function componentWillMount() {
-        if (!_canUseDom2.default || this.containerElement) {
-          return
-        }
-        if (_react2.default.version.match(/^16/)) {
-          this.containerElement = document.createElement("div")
-        }
-      },
-    },
     {
       key: "componentDidMount",
       value: function componentDidMount() {
@@ -127,6 +116,9 @@ var InfoWindow = (exports.InfoWindow = (function(_React$PureComponent) {
           eventMap
         )
         if (_react2.default.version.match(/^16/)) {
+          if (_canUseDom2.default && !this.containerElement) {
+            this.containerElement = document.createElement("div")
+          }
           this.state[_constants.INFO_WINDOW].setContent(this.containerElement)
           open(
             this.state[_constants.INFO_WINDOW],
diff --git a/lib/components/addons/InfoBox.js b/lib/components/addons/InfoBox.js
index b55c452e..2c0f2411 100644
--- a/lib/components/addons/InfoBox.js
+++ b/lib/components/addons/InfoBox.js
@@ -107,35 +107,8 @@ var InfoBox = (exports.InfoBox = (function(_React$PureComponent) {
 
   ;(0, _createClass3.default)(InfoBox, [
     {
-      key: "componentWillMount",
-
-      /*
-     * @see https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoBox
-     */
-      value: function componentWillMount() {
-        if (!_canUseDom2.default || this.state[_constants.INFO_BOX]) {
-          return
-        }
-
-        var _require = require(/* "google-maps-infobox" uses "google" as a global variable. Since we don't
-                              * have "google" on the server, we can not use it in server-side rendering.
-                              * As a result, we import "google-maps-infobox" here to prevent an error on
-                              * a isomorphic server.
-                              */ "google-maps-infobox"),
-          GoogleMapsInfobox = _require.InfoBox
-
-        var infoBox = new GoogleMapsInfobox()
-        ;(0, _MapChildHelper.construct)(
-          InfoBox.propTypes,
-          updaterMap,
-          this.props,
-          infoBox
-        )
-        infoBox.setMap(this.context[_constants.MAP])
-        this.setState(
-          (0, _defineProperty3.default)({}, _constants.INFO_BOX, infoBox)
-        )
-      },
+      key: "componentDidMount",
+      value: function componentDidMount() {},
     },
     {
       key: "componentDidMount",
@@ -145,6 +118,29 @@ var InfoBox = (exports.InfoBox = (function(_React$PureComponent) {
           this.state[_constants.INFO_BOX],
           eventMap
         )
+        /*
+      * @see https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoBox
+      */
+        if (_canUseDom2.default && !this.state[_constants.INFO_BOX]) {
+          var _require = require(/* "google-maps-infobox" uses "google" as a global variable. Since we don't
+                                * have "google" on the server, we can not use it in server-side rendering.
+                                * As a result, we import "google-maps-infobox" here to prevent an error on
+                                * a isomorphic server.
+                                */ "google-maps-infobox"),
+            GoogleMapsInfobox = _require.InfoBox
+
+          var infoBox = new GoogleMapsInfobox()
+          ;(0, _MapChildHelper.construct)(
+            InfoBox.propTypes,
+            updaterMap,
+            this.props,
+            infoBox
+          )
+          infoBox.setMap(this.context[_constants.MAP])
+          this.setState(
+            (0, _defineProperty3.default)({}, _constants.INFO_BOX, infoBox)
+          )
+        }
         var content = document.createElement("div")
         _reactDom2.default.unstable_renderSubtreeIntoContainer(
           this,
diff --git a/lib/components/places/SearchBox.js b/lib/components/places/SearchBox.js
index eaf20e81..494ca9c4 100644
--- a/lib/components/places/SearchBox.js
+++ b/lib/components/places/SearchBox.js
@@ -108,27 +108,20 @@ var SearchBox = (exports.SearchBox = (function(_React$PureComponent) {
   }
 
   ;(0, _createClass3.default)(SearchBox, [
-    {
-      key: "componentWillMount",
-      value: function componentWillMount() {
-        if (!_canUseDom2.default || this.containerElement) {
-          return
-        }
-        ;(0, _invariant2.default)(
-          google.maps.places,
-          'Did you include "libraries=places" in the URL?'
-        )
-        this.containerElement = document.createElement("div")
-        this.handleRenderChildToContainerElement()
-        if (_react2.default.version.match(/^16/)) {
-          return
-        }
-        this.handleInitializeSearchBox()
-      },
-    },
     {
       key: "componentDidMount",
       value: function componentDidMount() {
+        if (_canUseDom2.default && !this.containerElement) {
+          ;(0, _invariant2.default)(
+            google.maps.places,
+            'Did you include "libraries=places" in the URL?'
+          )
+          this.containerElement = document.createElement("div")
+          this.handleRenderChildToContainerElement()
+          if (!_react2.default.version.match(/^16/)) {
+            this.handleInitializeSearchBox()
+          }
+        }
         var searchBox = this.state[_constants.SEARCH_BOX]
         if (_react2.default.version.match(/^16/)) {
           searchBox = this.handleInitializeSearchBox()
diff --git a/lib/withGoogleMap.js b/lib/withGoogleMap.js
index e4456311..a441b898 100644
--- a/lib/withGoogleMap.js
+++ b/lib/withGoogleMap.js
@@ -123,8 +123,8 @@ function withGoogleMap(BaseComponent) {
         },
       },
       {
-        key: "componentWillMount",
-        value: function componentWillMount() {
+        key: "componentDidMount",
+        value: function componentDidMount() {
           var _props = this.props,
             containerElement = _props.containerElement,
             mapElement = _props.mapElement
diff --git a/lib/withScriptjs.js b/lib/withScriptjs.js
index 21084d0b..42c5f38d 100644
--- a/lib/withScriptjs.js
+++ b/lib/withScriptjs.js
@@ -119,8 +119,8 @@ function withScriptjs(BaseComponent) {
         },
       },
       {
-        key: "componentWillMount",
-        value: function componentWillMount() {
+        key: "componentDidMount",
+        value: function componentDidMount() {
           var _props = this.props,
             loadingElement = _props.loadingElement,
             googleMapURL = _props.googleMapURL
@@ -129,11 +129,6 @@ function withScriptjs(BaseComponent) {
             !!loadingElement && !!googleMapURL,
             "Required props loadingElement or googleMapURL is missing. You need to provide both of them."
           )
-        },
-      },
-      {
-        key: "componentDidMount",
-        value: function componentDidMount() {
           var loadingState = this.state.loadingState
 
           if (loadingState !== LOADING_STATE_NONE || !_canUseDom2.default) {
@@ -145,8 +140,6 @@ function withScriptjs(BaseComponent) {
           // Don't load scriptjs as a dependency since we do not want this module be used on server side.
           // eslint-disable-next-line global-require
           var scriptjs = require("scriptjs")
-          var googleMapURL = this.props.googleMapURL
-
           scriptjs(googleMapURL, this.handleLoaded)
         },
       },
diff --git a/src/components/InfoWindow.jsx b/src/components/InfoWindow.jsx
index 09b92be2..64b3198a 100644
--- a/src/components/InfoWindow.jsx
+++ b/src/components/InfoWindow.jsx
@@ -101,18 +101,12 @@ export class InfoWindow extends React.PureComponent {
     }
   }
 
-  componentWillMount() {
-    if (!canUseDOM || this.containerElement) {
-      return
-    }
-    if (React.version.match(/^16/)) {
-      this.containerElement = document.createElement(`div`)
-    }
-  }
-
   componentDidMount() {
     componentDidMount(this, this.state[INFO_WINDOW], eventMap)
     if (React.version.match(/^16/)) {
+      if (canUseDOM && !this.containerElement) {
+        this.containerElement = document.createElement(`div`)
+      }
       this.state[INFO_WINDOW].setContent(this.containerElement)
       open(this.state[INFO_WINDOW], this.context[ANCHOR])
       return
diff --git a/src/components/addons/InfoBox.jsx b/src/components/addons/InfoBox.jsx
index a478e4a3..f9a80b17 100644
--- a/src/components/addons/InfoBox.jsx
+++ b/src/components/addons/InfoBox.jsx
@@ -95,30 +95,32 @@ export class InfoBox extends React.PureComponent {
     [INFO_BOX]: null,
   }
 
-  /*
-   * @see https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoBox
-   */
-  componentWillMount() {
-    if (!canUseDOM || this.state[INFO_BOX]) {
-      return
-    }
-    const {
-      InfoBox: GoogleMapsInfobox,
-    } = require(/* "google-maps-infobox" uses "google" as a global variable. Since we don't
-       * have "google" on the server, we can not use it in server-side rendering.
-       * As a result, we import "google-maps-infobox" here to prevent an error on
-       * a isomorphic server.
-       */ `google-maps-infobox`)
-    const infoBox = new GoogleMapsInfobox()
-    construct(InfoBox.propTypes, updaterMap, this.props, infoBox)
-    infoBox.setMap(this.context[MAP])
-    this.setState({
-      [INFO_BOX]: infoBox,
-    })
+
+  componentDidMount() {
+
+
   }
 
   componentDidMount() {
     componentDidMount(this, this.state[INFO_BOX], eventMap)
+    /*
+    * @see https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoBox
+    */
+    if (canUseDOM && !this.state[INFO_BOX]) {
+      const {
+        InfoBox: GoogleMapsInfobox,
+      } = require(/* "google-maps-infobox" uses "google" as a global variable. Since we don't
+         * have "google" on the server, we can not use it in server-side rendering.
+         * As a result, we import "google-maps-infobox" here to prevent an error on
+         * a isomorphic server.
+         */ `google-maps-infobox`)
+      const infoBox = new GoogleMapsInfobox()
+      construct(InfoBox.propTypes, updaterMap, this.props, infoBox)
+      infoBox.setMap(this.context[MAP])
+      this.setState({
+        [INFO_BOX]: infoBox,
+      })
+    }
     const content = document.createElement(`div`)
     ReactDOM.unstable_renderSubtreeIntoContainer(
       this,
diff --git a/src/components/addons/MarkerClusterer.md b/src/components/addons/MarkerClusterer.md
index bf0e1759..2a47b523 100644
--- a/src/components/addons/MarkerClusterer.md
+++ b/src/components/addons/MarkerClusterer.md
@@ -49,7 +49,7 @@ const MapWithAMarkerClusterer = compose(
 );
 
 class DemoApp extends React.PureComponent {
-  componentWillMount() {
+  constructor() {
     this.setState({ markers: [] })
   }
 
diff --git a/src/components/places/SearchBox.jsx b/src/components/places/SearchBox.jsx
index 7ad62fb3..06fc83b3 100644
--- a/src/components/places/SearchBox.jsx
+++ b/src/components/places/SearchBox.jsx
@@ -60,23 +60,18 @@ export class SearchBox extends React.PureComponent {
     [SEARCH_BOX]: null,
   }
 
-  componentWillMount() {
-    if (!canUseDOM || this.containerElement) {
-      return
-    }
-    invariant(
-      google.maps.places,
-      `Did you include "libraries=places" in the URL?`
-    )
-    this.containerElement = document.createElement(`div`)
-    this.handleRenderChildToContainerElement()
-    if (React.version.match(/^16/)) {
-      return
-    }
-    this.handleInitializeSearchBox()
-  }
-
   componentDidMount() {
+    if (canUseDOM && !this.containerElement) {
+      invariant(
+        google.maps.places,
+        `Did you include "libraries=places" in the URL?`
+      )
+      this.containerElement = document.createElement(`div`)
+      this.handleRenderChildToContainerElement()
+      if (!React.version.match(/^16/)) {
+        this.handleInitializeSearchBox()
+      }
+    }
     let searchBox = this.state[SEARCH_BOX]
     if (React.version.match(/^16/)) {
       searchBox = this.handleInitializeSearchBox()
diff --git a/src/macros/InfoWindow.jsx b/src/macros/InfoWindow.jsx
index 5ed77210..7ced6eb2 100644
--- a/src/macros/InfoWindow.jsx
+++ b/src/macros/InfoWindow.jsx
@@ -53,18 +53,12 @@ export class InfoWindow extends React.PureComponent {
     }
   }
 
-  componentWillMount() {
-    if (!canUseDOM || this.containerElement) {
-      return
-    }
-    if (React.version.match(/^16/)) {
-      this.containerElement = document.createElement(`div`)
-    }
-  }
-
   componentDidMount() {
     componentDidMount(this, this.state[INFO_WINDOW], eventMap)
     if (React.version.match(/^16/)) {
+      if (canUseDOM && !this.containerElement) {
+        this.containerElement = document.createElement(`div`)
+      }
       this.state[INFO_WINDOW].setContent(this.containerElement)
       open(this.state[INFO_WINDOW], this.context[ANCHOR])
       return
diff --git a/src/macros/places/SearchBox.jsx b/src/macros/places/SearchBox.jsx
index 3f3f0653..30bcd7f0 100644
--- a/src/macros/places/SearchBox.jsx
+++ b/src/macros/places/SearchBox.jsx
@@ -46,23 +46,15 @@ export class SearchBox extends React.PureComponent {
     [SEARCH_BOX]: null,
   }
 
-  componentWillMount() {
-    if (!canUseDOM || this.containerElement) {
-      return
-    }
-    invariant(
-      google.maps.places,
-      `Did you include "libraries=places" in the URL?`
-    )
-    this.containerElement = document.createElement(`div`)
-    this.handleRenderChildToContainerElement()
-    if (React.version.match(/^16/)) {
-      return
-    }
-    this.handleInitializeSearchBox()
-  }
-
   componentDidMount() {
+    if (canUseDOM && !this.containerElement) {
+      invariant(
+        google.maps.places,
+        `Did you include "libraries=places" in the URL?`
+      )
+      this.containerElement = document.createElement(`div`)
+      this.handleRenderChildToContainerElement()
+    }
     let searchBox = this.state[SEARCH_BOX]
     if (React.version.match(/^16/)) {
       searchBox = this.handleInitializeSearchBox()
diff --git a/src/withGoogleMap.jsx b/src/withGoogleMap.jsx
index a4bf3c41..2c86e06e 100644
--- a/src/withGoogleMap.jsx
+++ b/src/withGoogleMap.jsx
@@ -34,7 +34,7 @@ export function withGoogleMap(BaseComponent) {
       }
     }
 
-    componentWillMount() {
+    componentDidMount() {
       const { containerElement, mapElement } = this.props
       invariant(
         !!containerElement && !!mapElement,
diff --git a/src/withScriptjs.jsx b/src/withScriptjs.jsx
index 66f25cba..c28b7b2c 100644
--- a/src/withScriptjs.jsx
+++ b/src/withScriptjs.jsx
@@ -37,15 +37,12 @@ export function withScriptjs(BaseComponent) {
       })
     }
 
-    componentWillMount() {
+    componentDidMount() {
       const { loadingElement, googleMapURL } = this.props
       invariant(
         !!loadingElement && !!googleMapURL,
         `Required props loadingElement or googleMapURL is missing. You need to provide both of them.`
       )
-    }
-
-    componentDidMount() {
       const { loadingState } = this.state
       if (loadingState !== LOADING_STATE_NONE || !canUseDOM) {
         return
@@ -56,7 +53,6 @@ export function withScriptjs(BaseComponent) {
       // Don't load scriptjs as a dependency since we do not want this module be used on server side.
       // eslint-disable-next-line global-require
       const scriptjs = require(`scriptjs`)
-      const { googleMapURL } = this.props
       scriptjs(googleMapURL, this.handleLoaded)
     }