chore(gh-pages): migration from ScriptjsGoogleMap to ScriptjsLoader

* Ref #145
tomchentw · Nov 21, 2015 · a80a25f · a80a25f
1 parent ccfadd4
commit a80a25f
Showing 1 changed file with 33 additions and 22 deletions.
diff --git a/examples/gh-pages/scripts/components/AsyncGettingStarted.js b/examples/gh-pages/scripts/components/AsyncGettingStarted.js
@@ -2,8 +2,8 @@ import {default as React, Component} from "react";
 import {default as update} from "react-addons-update";
 import {default as FaSpinner} from "react-icons/lib/fa/spinner";
 
-import {default as ScriptjsGoogleMap} from "react-google-maps/lib/async/ScriptjsGoogleMap";
-import {Marker} from "react-google-maps";
+import {default as ScriptjsLoader} from "react-google-maps/lib/async/ScriptjsLoader";
+import {GoogleMap, Marker} from "react-google-maps";
 
 /*
  * This is the modify version of:
@@ -69,7 +69,7 @@ export default class AsyncGettingStarted extends Component {
   render () {
     // <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" />
     return (
-      <ScriptjsGoogleMap
+      <ScriptjsLoader
         hostname={"maps.googleapis.com"}
         pathname={"/maps/api/js"}
         query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
@@ -89,25 +89,36 @@ export default class AsyncGettingStarted extends Component {
             />
           </div>
         }
-        // <GoogleMap> props
-        containerProps={{
-          ...this.props,
-          style: {
-            height: "100%",
-          },
-        }}
-        ref="map"
-        defaultZoom={3}
-        defaultCenter={{lat: -25.363882, lng: 131.044922}}
-        onClick={::this.handleMapClick}>
-        {this.state.markers.map((marker, index) => {
-          return (
-            <Marker
-              {...marker}
-              onRightclick={this.handleMarkerRightclick.bind(this, index)} />
-          );
-        })}
-      </ScriptjsGoogleMap>
+        googleMapElement={
+          <GoogleMap
+            containerProps={{
+              ...this.props,
+              style: {
+                height: "100%",
+              },
+            }}
+            ref={googleMap => {
+              // Wait until GoogleMap is fully loaded. Related to #133
+              setTimeout(() => {
+                console.log(googleMap)
+                console.log("Zoom: " + googleMap.getZoom());
+                console.log("Center: " + googleMap.getCenter());
+              }, 50);
+            }}
+            defaultZoom={3}
+            defaultCenter={{lat: -25.363882, lng: 131.044922}}
+            onClick={::this.handleMapClick}
+          >
+            {this.state.markers.map((marker, index) => {
+              return (
+                <Marker
+                  {...marker}
+                  onRightclick={this.handleMarkerRightclick.bind(this, index)} />
+              );
+            })}
+          </GoogleMap>
+        }
+      />
     );
   }
 }