diff --git a/src/Map.js b/src/Map.js index 561189a7..05a5fbd3 100644 --- a/src/Map.js +++ b/src/Map.js @@ -3,11 +3,12 @@ var React = require("react/addons"); var ChildMixin = require("./mixins/ChildMixin"); +var EventBindingMixin = require("./mixins/EventBindingMixin"); module.exports = React.createClass({ displayName: "Map", - mixins: [ChildMixin], + mixins: [ChildMixin, EventBindingMixin], contextTypes: { _set_map: React.PropTypes.func @@ -16,11 +17,23 @@ module.exports = React.createClass({ componentDidMount () { if (this.invalid_context(true)) return; this._init_map(this.context); + this.add_listeners(this.context); + }, + + componentWillUpdate () { + if (this.invalid_context(true)) return; + this.clear_listeners(this.context); }, componentDidUpdate () { if (this.invalid_context(true)) return; this._init_map(this.context); + this.add_listeners(this.context); + }, + + componentWillUnmount () { + if (this.invalid_context(true)) return; + this.clear_listeners(this.context); }, render () { diff --git a/src/Marker.js b/src/Marker.js index ca119b95..1cb1c965 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -3,11 +3,12 @@ var React = require("react/addons"); var ChildMixin = require("./mixins/ChildMixin"); +var EventBindingMixin = require("./mixins/EventBindingMixin"); module.exports = React.createClass({ displayName: "Marker", - mixins: [ChildMixin], + mixins: [ChildMixin, EventBindingMixin], getInitialState () { return { @@ -24,11 +25,23 @@ module.exports = React.createClass({ componentDidMount () { if (this.invalid_context(this.state.marker)) return; this._init_marker(this.context); + this.add_listeners(this.context); + }, + + componentWillUpdate () { + if (this.invalid_context(this.state.marker)) return; + this.clear_listeners(this.context); }, componentDidUpdate () { if (this.invalid_context(this.state.marker)) return; this._init_marker(this.context); + this.add_listeners(this.context); + }, + + componentWillUnmount () { + if (this.invalid_context(this.state.marker)) return; + this.clear_listeners(this.context); }, render () { @@ -36,6 +49,9 @@ module.exports = React.createClass({ }, _init_marker (context) { + if (this.state.marker || !context.hasMap() || !context.getApi()) { + return; + } var {Marker} = context.getApi(); var marker = new Marker(this.props); marker.setMap(context.getMap()); diff --git a/src/mixins/EventBindingMixin.js b/src/mixins/EventBindingMixin.js index 43a58922..1dd26dd2 100644 --- a/src/mixins/EventBindingMixin.js +++ b/src/mixins/EventBindingMixin.js @@ -42,16 +42,15 @@ module.exports = { }); }, - upsert_listeners (googleMapsApi, map) { - this.clear_listeners(googleMapsApi, map); + add_listeners (context) { this.state.eventNames.forEach((eventName) => { var name = EVENT_MAP[eventName]; - googleMapsApi.event.addListener(map, name, this.props[eventName]); + context.getApi().event.addListener(context.getMap(), name, this.props[eventName]); }); }, - clear_listeners (googleMapsApi, map) { - googleMapsApi.event.clearInstanceListeners(map); + clear_listeners (context) { + context.getApi().event.clearInstanceListeners(context.getMap()); }, _collect_event_names (props) {