From 0f100d86da308ae6fd91409733f7f8f6a4ca34a2 Mon Sep 17 00:00:00 2001
From: Tom Chen <developer@tomchentw.com>
Date: Sun, 22 Nov 2015 11:38:27 +0800
Subject: [PATCH] feat(ScriptjsLoader): new behavior will render
 GoogleMapLoader instead

* Ref #92

BREAKING CHANGE: ScriptjsLoader will delegate to GoogleMapLoader when the script is loaded

Before:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
  loadingElement={
    <div {...this.props} style={{ height: "100%" }}>
      <FaSpinner />
    </div>
  }
  googleMapElement={
    <GoogleMap
      containerProps={{
        ...this.props,
        style: {
          height: "100%",
        },
      }}
      ref={googleMap => {
        // Wait until GoogleMap is fully loaded. Related to #133
        setTimeout(() => {
          googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
        }, 50);
      }}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}
    >
      <Marker
        {...this.state.marker}
        onRightclick={this.handleMarkerRightclick}
      />
    </GoogleMap>
  }
/>
```

After:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
  loadingElement={
    <div {...this.props} style={{ height: "100%" }}>
      <FaSpinner />
    </div>
  }
  containerElement={
    <div {...this.props} style={{ height: "100%" }} />
  }
  googleMapElement={
    <GoogleMap
      ref={googleMap => {
        googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
      }}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}
    >
      <Marker
        {...this.state.marker}
        onRightclick={this.handleMarkerRightclick}
      />
    </GoogleMap>
  }
/>
```
---
 src/async/ScriptjsLoader.js | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/async/ScriptjsLoader.js b/src/async/ScriptjsLoader.js
index db9a9dfe..290a5199 100644
--- a/src/async/ScriptjsLoader.js
+++ b/src/async/ScriptjsLoader.js
@@ -17,6 +17,7 @@ import {
 } from "warning";
 
 import {
+  GoogleMapLoader,
   GoogleMap,
 } from "../index";
 
@@ -31,14 +32,32 @@ export default class ScriptjsLoader extends Component {
     ...urlObjDefinition,
     // PropTypes for ScriptjsLoader
     loadingElement: PropTypes.node,
+    // ...GoogleMapLoader.propTypes,// Uncomment for 5.0.0
     googleMapElement: propTypesElementOfType(GoogleMap).isRequired,
-  }
+  };
+
+  static defaultProps = {
+  };
 
   state = {
     isLoaded: false,
   }
 
+  shouldUseNewBehavior () {
+    const {containerTagName, containerProps} = this.props.googleMapElement.props;
+    return (
+      null != this.props.containerElement &&
+      undefined === containerTagName &&
+      undefined === containerProps
+    );
+  }
+
   componentWillMount () {
+    warning(this.shouldUseNewBehavior(),
+`"async/ScriptjsLoader" is now rendering "GoogleMapLoader". Migrate to use "GoogleMapLoader" instead. 
+The old behavior will be removed in next major release (5.0.0). 
+See https://github.com/tomchentw/react-google-maps/pull/157 for more details.`
+    );
     if (!canUseDOM) {
       return;
     }
@@ -65,7 +84,15 @@ export default class ScriptjsLoader extends Component {
 
   render () {
     if (this.state.isLoaded) {
-      return this.props.googleMapElement;
+      const {protocol, hostname, port, pathname, query, loadingElement, ...restProps} = this.props;
+
+      if (this.shouldUseNewBehavior()) {
+        return (
+          <GoogleMapLoader {...restProps} />
+        );
+      } else {//------------ Deprecated ------------
+        return this.props.googleMapElement;
+      }
     } else {
       return this.props.loadingElement;
     }