feat(Polyline): component with example

client/scripts/index.js

@@ -4,7 +4,7 @@ require("../styles/index.scss");
 var React = require("react/addons");
 var {update} = React.addons;
 
-var {GoogleMapsMixin, Map, Marker, Polygon} = require("../../src");
+var {GoogleMapsMixin, Map, Marker, Polygon, Polyline} = require("../../src");
 
 var Body = React.createClass({
 
@@ -27,6 +27,18 @@ var Body = React.createClass({
         fillColor: '#FF0000',
         fillOpacity: 0.35,
       },
+      flightPath: {
+        path: [
+          {lat: 37.772323, lng: -122.214897},
+          {lat: 21.291982, lng: -157.821856},
+          {lat: -18.142599, lng: 178.431},
+          {lat: -27.46758, lng: 153.027892},
+        ],
+        geodesic: true,
+        strokeColor: '#FF0000',
+        strokeOpacity: 1.0,
+        strokeWeight: 2,
+      },
     };
   },
 
@@ -86,6 +98,7 @@ var Body = React.createClass({
           onRightclick: this._handle_polygon_rightclick
         }}))
       }
+      { Polyline(props.flightPath) }
     </div>;
   }
 });

src/Marker.js

@@ -18,7 +18,6 @@ module.exports = React.createClass({
 
   componentDidMount () {
     var marker = this._init_marker();
-    console.log("componentDidMount", marker);
     if (!marker) return;
     this.add_listeners(marker);
   },

src/Polyline.js

@@ -0,0 +1,72 @@
+/** @jsx React.DOM */
+"use strict";
+var React = require("react/addons");
+
+var ChildMixin = require("./mixins/ChildMixin");
+var EventBindingMixin = require("./mixins/EventBindingMixin");
+
+module.exports = React.createClass({
+  displayName: "Polyline",
+
+  mixins: [ChildMixin, EventBindingMixin],
+
+  getInitialState () {
+    return {
+      polyline: null
+    };
+  },
+
+  componentDidMount () {
+    var polyline = this._init_polyline();
+    if (!polyline) return;
+    this.add_listeners(polyline);
+  },
+
+  componentWillUpdate () {
+    var {polyline} = this.state;
+    if (!polyline) return;
+    this.clear_listeners(polyline);
+  },
+
+  componentDidUpdate () {
+    var polyline = this._init_polyline();
+    if (!polyline) return;
+    this.add_listeners(polyline);
+    polyline.setOptions(this.props);
+  },
+
+  componentWillUnmount () {
+    var {polyline} = this.state;
+    if (!polyline) return;
+    this.clear_listeners(polyline);
+    polyline.setMap(null);
+    this.setState({ polyline: null });
+  },
+
+  render () {
+    return this._render(this.props, this.state);
+  },
+
+  get_event_names () {
+    return "click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick";
+  },
+
+  _init_polyline () {
+    var {context} = this;
+    var {polyline} = this.state;
+    if (polyline || !context.hasMap() || !context.getApi()) {
+      return polyline;
+    }
+    var {Polyline} = context.getApi();
+    polyline = new Polyline(this.props);
+    polyline.setMap(context.getMap());
+
+    this.expose_getters_from(Polyline.prototype, polyline);
+    this.setState({ polyline });
+    return polyline;
+  },
+
+  _render (props, state) {
+    return null;
+  }
+});

src/index.js

@@ -4,3 +4,4 @@ exports.GoogleMapsMixin = require("./GoogleMapsMixin");
 exports.Map = require("./Map");
 exports.Marker = require("./Marker");
 exports.Polygon = require("./Polygon");
+exports.Polyline = require("./Polyline");