version 0.1.11

dist/components/__tests__/gmaps-test.js

@@ -10,6 +10,7 @@ describe("Gmaps", function () {
   var Gmaps = require("../gmaps");
 
   var gmaps = undefined;
+
   var width = "100%";
   var height = "100%";
   var style = {
@@ -20,13 +21,24 @@ describe("Gmaps", function () {
 
   beforeEach(function () {
     delete window.google;
-    gmaps = TestUtils.renderIntoDocument(React.createElement(Gmaps, {
-      width: width,
-      height: height,
-      style: style,
-      className: className,
-      onMapCreated: onMapCreated,
-      onClick: jest.genMockFunction() }));
+    var Child = React.createClass({
+      displayName: "Child",
+
+      render: function render() {
+        return null;
+      }
+    });
+    gmaps = TestUtils.renderIntoDocument(React.createElement(
+      Gmaps,
+      {
+        width: width,
+        height: height,
+        style: style,
+        className: className,
+        onMapCreated: onMapCreated,
+        onClick: jest.genMockFunction() },
+      React.createElement(Child, null)
+    ));
     window.google = {
       maps: {
         Map: jest.genMockFunction(),
@@ -63,6 +75,10 @@ describe("Gmaps", function () {
     expect(onMapCreated).toBeCalled();
   });
 
+  it("clones children with map", function () {
+    expect(gmaps.getChildren()[".0"].props.map).toBeDefined();
+  });
+
   it("binds events", function () {
     expect(window.google.maps.event.addListener).toBeCalled();
   });

dist/components/__tests__/infowindow-test.js

@@ -42,4 +42,29 @@ describe("InfoWindow", function () {
     infoWindow.componentWillUnmount();
     expect(window.google.maps.event.removeListener).toBeCalled();
   });
+
+  it("calls `setOptions` when receive new props", function () {
+    window.google.maps.InfoWindow = function () {
+      return {
+        setOptions: jest.genMockFunction()
+      };
+    };
+    var Parent = React.createClass({
+      displayName: "Parent",
+
+      getInitialState: function getInitialState() {
+        return {
+          content: "1"
+        };
+      },
+      render: function render() {
+        return React.createElement(InfoWindow, { ref: "child", content: this.state.testState });
+      }
+    });
+    var parent = TestUtils.renderIntoDocument(React.createElement(Parent, null));
+    parent.setState({
+      content: "2"
+    });
+    expect(parent.refs.child.infoWindow.setOptions).toBeCalled();
+  });
 });

dist/components/gmaps.js

@@ -19,6 +19,12 @@ var Gmaps = React.createClass({
 
   map: null,
 
+  getInitialState: function getInitialState() {
+    return {
+      isMapCreated: false
+    };
+  },
+
   componentDidMount: function componentDidMount() {
     this.loadMaps();
   },
@@ -46,7 +52,6 @@ var Gmaps = React.createClass({
   mapsCallback: function mapsCallback() {
     delete window.mapsCallback;
     this.createMap();
-    this.createChildren();
     this.addListeners(this.map, MapEvents);
   },
 
@@ -55,25 +60,25 @@ var Gmaps = React.createClass({
       center: new google.maps.LatLng(this.props.lat, this.props.lng),
       zoom: this.props.zoom
     });
+    this.setState({
+      isMapCreated: true
+    });
     if (this.props.onMapCreated) {
       this.props.onMapCreated();
     }
   },
 
-  createChildren: function createChildren() {
+  getChildren: function getChildren() {
     var _this = this;
 
-    var children = React.Children.map(this.props.children, function (child) {
+    return React.Children.map(this.props.children, function (child) {
       if (!React.isValidElement(child)) {
         return child;
       }
       return cloneWithProps(child, {
         map: _this.map
       });
     });
-    this.setState({
-      children: children
-    });
   },
 
   render: function render() {
@@ -85,7 +90,7 @@ var Gmaps = React.createClass({
       "div",
       { style: style, className: this.props.className },
       "Loading...",
-      this.state ? this.state.children : null
+      this.state.isMapCreated ? this.getChildren() : null
     );
   } });
 

dist/components/infoWindow.js

@@ -15,20 +15,29 @@ var InfoWindow = React.createClass({
   infoWindow: null,
 
   componentDidMount: function componentDidMount() {
-    this.infoWindow = new google.maps.InfoWindow({
-      content: this.props.content,
-      position: new google.maps.LatLng(this.props.lat, this.props.lng) });
-
+    var options = this.getOptions(this.props);
+    this.infoWindow = new google.maps.InfoWindow(options);
+    this.addListeners(this.infoWindow, InfoWindowEvents);
     if (this.props.open) {
       this.open();
     }
-    this.addListeners(this.infoWindow, InfoWindowEvents);
   },
 
   componentWillUnmount: function componentWillUnmount() {
     this.removeListeners();
   },
 
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    var options = this.getOptions(nextProps);
+    this.infoWindow.setOptions(options);
+  },
+
+  getOptions: function getOptions(props) {
+    return {
+      content: props.content,
+      position: new google.maps.LatLng(props.lat, props.lng) };
+  },
+
   open: function open() {
     this.infoWindow.open(this.props.map);
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gmaps",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "A Google Maps component for React.js",
   "main": "dist/index.js",
   "scripts": {