feat(Map): extract out Map component

src/GoogleMap.js

@@ -2,17 +2,11 @@
 "use strict";
 var React = require("react/addons");
 
-var EventBindingMixin = require("./mixins/EventBindingMixin");
-
-var mapsNullObject = {
-
-};
+var Map = require("./Map");
 
 module.exports = React.createClass({
   displayName: "GoogleMap",
 
-  mixins: [EventBindingMixin],
-
   getDefaultProps () {
     return {
       mapOptions: {}
@@ -36,37 +30,27 @@ module.exports = React.createClass({
     }
   },
 
-  componentDidMount () {
-    this._init_google_maps(this.state.googleMapsApi);
-  },
-
-  componentDidUpdate () {
-    this._init_google_maps(this.state.googleMapsApi);
-  },
-
   componentWillUnmount () {
     var {googleMapsApi, map} = this.state;
-    this.clear_listeners(googleMapsApi, map);
+    this.refs.map.clear_listeners(googleMapsApi, map);
   },
 
   render () {
     return this._render(this.props, this.state);
   },
 
-  _init_google_maps (googleMapsApi) {
-    if (mapsNullObject === googleMapsApi) { return; }
-    var {map, eventNames} = this.state;
-    if (!map) {
-      map = new googleMapsApi.Map(
-        this.refs.mapCanvas.getDOMNode(),
-        this.props.mapOptions
-      );
-      this.setState({ map });
-    }
-    this.upsert_listeners(googleMapsApi, map);
+  _on_map_ceated (map) {
+    this.setState({ map });
   },
 
   _render (props, state) {
-    return <div ref="mapCanvas" style={{width:"100%", height:400}} />;
+    return <div>
+      <Map  ref="map"
+            googleMapsApi={state.googleMapsApi}
+            options={props.mapOptions}
+            on_map_ceated={this._on_map_ceated}>
+      </Map>
+      {props.children}
+    </div>;
   }
 });

src/Map.js

@@ -0,0 +1,58 @@
+/** @jsx React.DOM */
+"use strict";
+var React = require("react/addons");
+
+var EventBindingMixin = require("./mixins/EventBindingMixin");
+
+var mapsNullObject = {
+
+};
+
+function noop () {}
+
+module.exports = React.createClass({
+  displayName: "Map",
+
+  mixins: [EventBindingMixin],
+
+  getDefaultProps () {
+    return {
+      googleMapsApi: mapsNullObject,
+      options: {},
+      on_map_ceated: noop,
+    };
+  },
+
+  getInitialState () {
+    return {
+      initialized: false
+    }
+  },
+
+  componentDidMount () {
+    this._init_google_maps(this.props.googleMapsApi);
+  },
+
+  componentDidUpdate () {
+    this._init_google_maps(this.props.googleMapsApi);
+  },
+
+  render () {
+    return this._render(this.props, this.state);
+  },
+
+  _init_google_maps (googleMapsApi) {
+    if (mapsNullObject === googleMapsApi || this.state.initialized) { return; }
+    var map = new googleMapsApi.Map(
+      this.refs.mapCanvas.getDOMNode(),
+      this.props.options
+    );
+    this.setState({ initialized: true });
+    this.props.on_map_ceated(map);
+    this.upsert_listeners(googleMapsApi, map);
+  },
+
+  _render (props, state) {
+    return <div ref="mapCanvas" style={{width:"100%", height:400}} />;
+  }
+});