"use strict";
var React = require("react/addons"),

    {GoogleMapsMixin, Map, Marker} = require("react-google-maps");

module.exports = React.createClass({
  /*
   * https://developers.google.com/maps/documentation/javascript/examples/event-simple
   */
  displayName: "SimpleClickEvent",

  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],

  getInitialState () {
    return {
      zoom: 4,
      center: new google.maps.LatLng(-25.363882, 131.044922),
      timeoutId: null,
    };
  },

  _handle_marker_click () {
    this.setState({
      zoom: 8,
      center: this.refs.marker.getPosition(),
    });
  },

  _handle_map_center_changed () {
    var {timeoutId} = this.state;
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      this.refs.map.panTo(this.refs.marker.getPosition());
    }, 3000);
    this.setState({
      timeoutId,
    });
  },

  _render (props, state) {
    return <div style={{height: "100%"}} {...props}>
      <Map ref="map" style={{height: "100%"}} zoom={state.zoom} center={state.center} onCenterChanged={this._handle_map_center_changed} />
      <Marker ref="marker" position={state.center} title="Click to zoom" onClick={this._handle_marker_click} />
    </div>;
  }
});

@@ -114,55 +114,35 @@
 ps%22)
-;%0A%0Amodule.exports = React.createClass(%7B%0A  
+,%0A    SimpleClickEvent;%0A
 /*%0A
-  
  * h
@@ -227,12 +227,49 @@
 le%0A 
-  
 */
+%0ASimpleClickEvent = React.createClass(%7B
 %0A  d
@@ -1270,12 +1270,205 @@
 v%3E;%0A  %7D%0A%7D);%0A
+%0Amodule.exports = React.createClass(%7B%0A  mixins: %5Brequire(%22../../ReactFutureMixin%22)%5D,%0A%0A  _render (props, state) %7B%0A    return %3CSimpleClickEvent googleMapsApi=%7Bgoogle.maps%7D %7B...props%7D /%3E;%0A  %7D%0A%7D);%0A

add client code that renders SimpleClickEvent