feat(async/ScriptjsLoader): replacement of async/ScriptjsGoogleMap

* Mark async/ScriptjsGoogleMap as deprecated
* Closes #145
* Ref #92

BREAKING CHANGE: migrate from async/ScriptjsGoogleMap to async/ScriptjsLoader and changed its behavior from implicit inheritance to simple delegation

To migrate the code follow the example below (extracted from examples/gh-pages migration):

Before:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  // <GoogleMap> props
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this._handle_map_click}
/>
```

After:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  googleMapElement={
    <GoogleMap
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this._handle_map_click}
    />
  }
/>
```

Author: tomchentw

src/async/ScriptjsGoogleMap.js

@@ -1,13 +1,8 @@
 import {
   default as React,
   Component,
-  PropTypes,
 } from "react";
 
-import {
-  default as canUseDOM,
-} from "can-use-dom";
-
 import {
   default as warning,
 } from "warning";
@@ -17,49 +12,35 @@ import {
 } from "../index";
 
 import {
-  default as makeUrl,
-  urlObjDefinition,
-  getUrlObjChangedKeys,
-} from "../utils/makeUrl";
+  default as ScriptjsLoader,
+} from "./ScriptjsLoader";
 
 export default class ScriptjsGoogleMap extends Component {
-  static propTypes = {
-    ...urlObjDefinition,
-    // PropTypes for ScriptjsGoogleMap
-    loadingElement: PropTypes.node,
-  }
-
-  state = {
-    isLoaded: false,
-  }
 
   componentWillMount () {
-    if (!canUseDOM) {
-      return;
-    }
-    const scriptjs = require("scriptjs");
-    const {protocol, hostname, port, pathname, query, ...restProps} = this.props;
-    const urlObj = {protocol, hostname, port, pathname, query};
-    const url =  makeUrl(urlObj);
-    scriptjs(url, () => this.setState({ isLoaded: true }));
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if ("production" !== process.env.NODE_ENV) {
-      const changedKeys = getUrlObjChangedKeys(this.props, nextProps);
-
-      warning(0 === changedKeys.length, `ScriptjsGoogleMap doesn't support mutating url related props after initial render. Changed props: %s`, `[${ changedKeys.join(", ") }]`);
-    }
+    warning(false,
+`"async/ScriptjsGoogleMap" is deprecated now and will be removed in next major release (5.0.0). Use "async/ScriptjsLoader" instead.
+See https://github.com/tomchentw/react-google-maps/pull/150 for more details.`
+    );
   }
 
   render () {
-    if (this.state.isLoaded) {
-      const {protocol, hostname, port, pathname, query, ...restProps} = this.props;
-      return (
-        <GoogleMap {...restProps} />
-      );
-    } else {
-      return this.props.loadingElement;
-    }
+    const {protocol, hostname, port, pathname, query, loadingElement, children, ...restProps} = this.props;
+
+    return (
+      <ScriptjsLoader
+        protocol={protocol}
+        hostname={hostname}
+        port={port}
+        pathname={pathname}
+        query={query}
+        loadingElement={loadingElement}
+        googleMapElement={
+          <GoogleMap {...restProps}>
+            {children}
+          </GoogleMap>
+        }
+      />
+    )
   }
 }

src/async/ScriptjsLoader.js

@@ -0,0 +1,69 @@
+import {
+  default as React,
+  Component,
+  PropTypes,
+} from "react";
+
+import {
+  default as canUseDOM,
+} from "can-use-dom";
+
+import {
+  default as warning,
+} from "warning";
+
+import {
+  GoogleMap,
+} from "../index";
+
+import {
+  default as makeUrl,
+  urlObjDefinition,
+  getUrlObjChangedKeys,
+} from "../utils/makeUrl";
+
+export default class ScriptjsLoader extends Component {
+  static propTypes = {
+    ...urlObjDefinition,
+    // PropTypes for ScriptjsLoader
+    loadingElement: PropTypes.node,
+    googleMapElement: PropTypes.element.isRequired,
+  }
+
+  state = {
+    isLoaded: false,
+  }
+
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    /*
+     * External commonjs require dependency -- begin
+     */
+    const scriptjs = require("scriptjs");
+    /*
+     * External commonjs require dependency -- end
+     */
+    const {protocol, hostname, port, pathname, query} = this.props;
+    const urlObj = {protocol, hostname, port, pathname, query};
+    const url = makeUrl(urlObj);
+    scriptjs(url, () => this.setState({ isLoaded: true }));
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if ("production" !== process.env.NODE_ENV) {
+      const changedKeys = getUrlObjChangedKeys(this.props, nextProps);
+
+      warning(0 === changedKeys.length, `ScriptjsLoader doesn't support mutating url related props after initial render. Changed props: %s`, `[${ changedKeys.join(", ") }]`);
+    }
+  }
+
+  render () {
+    if (this.state.isLoaded) {
+      return this.props.googleMapElement;
+    } else {
+      return this.props.loadingElement;
+    }
+  }
+}