Source: components/mapControl.js

import React from 'react';
import PropTypes from 'prop-types';
import ReactDom from 'react-dom';
import {ControlPosition} from '../utils/utils';
/**
* The component that defines a custom map control at a predifined position.
* 
* @property {object} props
* @property {google.maps.Map} props.map
* @property {google.maps} props.maps
* @property {string} props.position
* @property {number} props.index
*/
class MapControl extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'MapControl';
        this.cleanMapControlContent = this.cleanMapControlContent.bind(this);
    }
    cleanMapControlContent() {
    	var parent = ReactDom.findDOMNode(this.refs.controlParent);
    	var child = ReactDom.findDOMNode(this.refs.controlChildren);
    	parent.appendChild(child);
    }
    loadMapControlContent() {
    	var {maps, map, position} = this.props;
    	var children = ReactDom.findDOMNode(this.refs.controlChildren);
    	children.index = typeof this.props.index !== 'undefined' ? this.props.index : 1;

		if(position && map){
			map.controls[maps.ControlPosition[position]].push(children);
		}
		else
			console.warn("You must provide your map control a specific control position.");
    }
    componentWillMount() {

    }
    componentDidMount() {
    	this.loadMapControlContent();
    }
    componentDidUpdate() {
    }
    componentWillUnmount() {
    	 console.log("Component unmounting.")
          this.cleanMapControlContent();
    }
    render() {
        return <div ref="controlParent"><div ref="controlChildren">{this.props.children}</div></div>;
    }
}

MapControl.propTypes = {
	map : PropTypes.object,
	maps : PropTypes.object,
	position : PropTypes.oneOf(Object.getOwnPropertyNames(ControlPosition)).isRequired,
	index : PropTypes.number
}

export default MapControl;