theorigin/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://npmcdn.com/react@0.14.2/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@0.14.2/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/google-map-react@0.14.6/dist/GoogleMapReact.js"></script>


  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.place{
  width: 40px;
  padding: 20px;
  border: 1px solid blue;
  background: red;
  color: yellow;
}
</style>
</head>
<body>
  <div id="main"></div>
<script id="jsbin-javascript">
"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SimpleMap = (function (_React$Component) {
  _inherits(SimpleMap, _React$Component);

  function SimpleMap() {
    var _this = this;

    _classCallCheck(this, SimpleMap);

    _get(Object.getPrototypeOf(SimpleMap.prototype), "constructor", this).apply(this, arguments);

    this.state = {
      center: [60.938043, 30.337157],
      zoom: 9
    };

    this._onChange = function (_ref) {
      var center = _ref.center;
      var zoom = _ref.zoom;

      _this.setState({
        center: center,
        zoom: zoom
      });
    };

    this._onGoogleApiLoaded = function (_ref2) {
      var map = _ref2.map;
      var maps = _ref2.maps;

      _displayCoordinates = function (pnt) {
        var holder = document.getElementById('holder-coordinates-display');
        holder.style.visibility = "visible";

        var lat = pnt.lat();
        lat = lat.toFixed(4);
        var lng = pnt.lng();
        lng = lng.toFixed(4);
        holder.innerHTML = "Latitude: " + lat + "  Longitude: " + lng;
      };

      _centerControl = function (controlDiv, map, initialLat, initialLng) {
        var controlUI = document.createElement('div');
        controlUI.id = 'holder-coordinates-display';
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        //controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.marginBottom = '0px';
        controlUI.style.marginLeft = '0px';
        controlUI.style.textAlign = 'center';
        controlUI.style.minWidth = '100px';
        controlUI.style.visibility = "hidden";
        controlUI.style.color = 'rgb(25,25,25)';
        controlUI.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlUI.style.fontSize = '12px';
        controlUI.style.lineHeight = '18px';
        controlUI.style.minHeight = '18px';
        controlUI.style.paddingLeft = '5px';
        controlUI.style.paddingRight = '5px';

        controlDiv.appendChild(controlUI);
      };

      // Create the DIV to hold the control and call the CenterControl()
      // constructor passing in this DIV.
      var centerControlDiv = document.createElement('div');
      var centerControl = new _centerControl(centerControlDiv, map);

      centerControlDiv.index = 1;
      map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

      maps.event.addListener(map, 'mousemove', function (event) {
        _displayCoordinates(event.latLng);
      });
    };
  }

  _createClass(SimpleMap, [{
    key: "render",
    value: function render() {
      return React.createElement(GoogleMapReact, {
        onChange: this._onChange,
        center: this.state.center,
        zoom: this.state.zoom,
        onGoogleApiLoaded: this._onGoogleApiLoaded,
        yesIWantToUseGoogleMapApiInternals: true
      });
    }
  }]);

  return SimpleMap;
})(React.Component);

ReactDOM.render(React.createElement(
  "div",
  { style: { width: '100%', height: 400 } },
  React.createElement(SimpleMap, null)
), document.getElementById('main'));
</script>


<script id="jsbin-source-css" type="text/css">.place{
  width: 40px;
  padding: 20px;
  border: 1px solid blue;
  background: red;
  color: yellow;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">class SimpleMap extends React.Component {
  state = {
    center: [60.938043, 30.337157],
    zoom: 9,
  };

  _onChange = ({center, zoom}) => {
    this.setState({
      center: center,
      zoom: zoom,
    });
  }


  _onGoogleApiLoaded = ({map, maps}) =>
  {
    _displayCoordinates = (pnt) => {
      var holder = document.getElementById('holder-coordinates-display');
      holder.style.visibility = "visible";

      var lat = pnt.lat();
      lat = lat.toFixed(4);
      var lng = pnt.lng();
      lng = lng.toFixed(4);
      holder.innerHTML = "Latitude: " + lat + "  Longitude: " + lng;
    }

    _centerControl = (controlDiv, map, initialLat, initialLng) => {
      var controlUI = document.createElement('div');
      controlUI.id = 'holder-coordinates-display';
      controlUI.style.backgroundColor = '#fff';
      controlUI.style.border = '2px solid #fff';
      //controlUI.style.borderRadius = '3px';
      controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
      controlUI.style.marginBottom = '0px';
      controlUI.style.marginLeft = '0px';
      controlUI.style.textAlign = 'center';
      controlUI.style.minWidth = '100px';
      controlUI.style.visibility = "hidden"
      controlUI.style.color = 'rgb(25,25,25)';
      controlUI.style.fontFamily = 'Roboto,Arial,sans-serif';
      controlUI.style.fontSize = '12px';
      controlUI.style.lineHeight = '18px';
      controlUI.style.minHeight = '18px';
      controlUI.style.paddingLeft = '5px';
      controlUI.style.paddingRight = '5px';

      controlDiv.appendChild(controlUI);
    }

    // Create the DIV to hold the control and call the CenterControl()
    // constructor passing in this DIV.
    var centerControlDiv = document.createElement('div');
    var centerControl = new _centerControl(centerControlDiv, map);

    centerControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

    maps.event.addListener(map, 'mousemove', function (event) {
      _displayCoordinates(event.latLng);
    });
  }

  render() {
    return (
       <GoogleMapReact
        onChange={this._onChange}
        center={this.state.center}
        zoom={this.state.zoom}
      onGoogleApiLoaded={this._onGoogleApiLoaded}
             yesIWantToUseGoogleMapApiInternals={true}
      >
      </GoogleMapReact>
    );
  }
}


ReactDOM.render(
  <div style={{width: '100%', height: 400}}>
    <SimpleMap/>
  </div>,
  document.getElementById('main')
);
</script></body>
</html>

## jsbin.disiboc.css
.place{
  width: 40px;
  padding: 20px;
  border: 1px solid blue;
  background: red;
  color: yellow;
}

## jsbin.disiboc.js
"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SimpleMap = (function (_React$Component) {
  _inherits(SimpleMap, _React$Component);

  function SimpleMap() {
    var _this = this;

    _classCallCheck(this, SimpleMap);

    _get(Object.getPrototypeOf(SimpleMap.prototype), "constructor", this).apply(this, arguments);

    this.state = {
      center: [60.938043, 30.337157],
      zoom: 9
    };

    this._onChange = function (_ref) {
      var center = _ref.center;
      var zoom = _ref.zoom;

      _this.setState({
        center: center,
        zoom: zoom
      });
    };

    this._onGoogleApiLoaded = function (_ref2) {
      var map = _ref2.map;
      var maps = _ref2.maps;

      _displayCoordinates = function (pnt) {
        var holder = document.getElementById('holder-coordinates-display');
        holder.style.visibility = "visible";

        var lat = pnt.lat();
        lat = lat.toFixed(4);
        var lng = pnt.lng();
        lng = lng.toFixed(4);
        holder.innerHTML = "Latitude: " + lat + "  Longitude: " + lng;
      };

      _centerControl = function (controlDiv, map, initialLat, initialLng) {
        var controlUI = document.createElement('div');
        controlUI.id = 'holder-coordinates-display';
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        //controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.marginBottom = '0px';
        controlUI.style.marginLeft = '0px';
        controlUI.style.textAlign = 'center';
        controlUI.style.minWidth = '100px';
        controlUI.style.visibility = "hidden";
        controlUI.style.color = 'rgb(25,25,25)';
        controlUI.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlUI.style.fontSize = '12px';
        controlUI.style.lineHeight = '18px';
        controlUI.style.minHeight = '18px';
        controlUI.style.paddingLeft = '5px';
        controlUI.style.paddingRight = '5px';

        controlDiv.appendChild(controlUI);
      };

      // Create the DIV to hold the control and call the CenterControl()
      // constructor passing in this DIV.
      var centerControlDiv = document.createElement('div');
      var centerControl = new _centerControl(centerControlDiv, map);

      centerControlDiv.index = 1;
      map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

      maps.event.addListener(map, 'mousemove', function (event) {
        _displayCoordinates(event.latLng);
      });
    };
  }

  _createClass(SimpleMap, [{
    key: "render",
    value: function render() {
      return React.createElement(GoogleMapReact, {
        onChange: this._onChange,
        center: this.state.center,
        zoom: this.state.zoom,
        onGoogleApiLoaded: this._onGoogleApiLoaded,
        yesIWantToUseGoogleMapApiInternals: true
      });
    }
  }]);

  return SimpleMap;
})(React.Component);

ReactDOM.render(React.createElement(
  "div",
  { style: { width: '100%', height: 400 } },
  React.createElement(SimpleMap, null)
), document.getElementById('main'));
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://npmcdn.com/react@0.14.2/dist/react.min.js"></script>
	<script src="https://npmcdn.com/react-dom@0.14.2/dist/react-dom.min.js"></script>
	<script src="https://npmcdn.com/google-map-react@0.14.6/dist/GoogleMapReact.js"></script>



	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.place{
	width: 40px;
	padding: 20px;
	border: 1px solid blue;
	background: red;
	color: yellow;
	}
	</style>
	</head>
	<body>
	<div id="main"></div>
	<script id="jsbin-javascript">
	"use strict";

	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

	var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

	var SimpleMap = (function (_React$Component) {
	_inherits(SimpleMap, _React$Component);

	function SimpleMap() {
	var _this = this;

	_classCallCheck(this, SimpleMap);

	_get(Object.getPrototypeOf(SimpleMap.prototype), "constructor", this).apply(this, arguments);

	this.state = {
	center: [60.938043, 30.337157],
	zoom: 9
	};

	this._onChange = function (_ref) {
	var center = _ref.center;
	var zoom = _ref.zoom;

	_this.setState({
	center: center,
	zoom: zoom
	});
	};

	this._onGoogleApiLoaded = function (_ref2) {
	var map = _ref2.map;
	var maps = _ref2.maps;

	_displayCoordinates = function (pnt) {
	var holder = document.getElementById('holder-coordinates-display');
	holder.style.visibility = "visible";

	var lat = pnt.lat();
	lat = lat.toFixed(4);
	var lng = pnt.lng();
	lng = lng.toFixed(4);
	holder.innerHTML = "Latitude: " + lat + " Longitude: " + lng;
	};

	_centerControl = function (controlDiv, map, initialLat, initialLng) {
	var controlUI = document.createElement('div');
	controlUI.id = 'holder-coordinates-display';
	controlUI.style.backgroundColor = '#fff';
	controlUI.style.border = '2px solid #fff';
	//controlUI.style.borderRadius = '3px';
	controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
	controlUI.style.marginBottom = '0px';
	controlUI.style.marginLeft = '0px';
	controlUI.style.textAlign = 'center';
	controlUI.style.minWidth = '100px';
	controlUI.style.visibility = "hidden";
	controlUI.style.color = 'rgb(25,25,25)';
	controlUI.style.fontFamily = 'Roboto,Arial,sans-serif';
	controlUI.style.fontSize = '12px';
	controlUI.style.lineHeight = '18px';
	controlUI.style.minHeight = '18px';
	controlUI.style.paddingLeft = '5px';
	controlUI.style.paddingRight = '5px';

	controlDiv.appendChild(controlUI);
	};

	// Create the DIV to hold the control and call the CenterControl()
	// constructor passing in this DIV.
	var centerControlDiv = document.createElement('div');
	var centerControl = new _centerControl(centerControlDiv, map);

	centerControlDiv.index = 1;
	map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

	maps.event.addListener(map, 'mousemove', function (event) {
	_displayCoordinates(event.latLng);
	});
	};
	}

	_createClass(SimpleMap, [{
	key: "render",
	value: function render() {
	return React.createElement(GoogleMapReact, {
	onChange: this._onChange,
	center: this.state.center,
	zoom: this.state.zoom,
	onGoogleApiLoaded: this._onGoogleApiLoaded,
	yesIWantToUseGoogleMapApiInternals: true
	});
	}
	}]);

	return SimpleMap;
	})(React.Component);

	ReactDOM.render(React.createElement(
	"div",
	{ style: { width: '100%', height: 400 } },
	React.createElement(SimpleMap, null)
	), document.getElementById('main'));
	</script>


	<script id="jsbin-source-css" type="text/css">.place{
	width: 40px;
	padding: 20px;
	border: 1px solid blue;
	background: red;
	color: yellow;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">class SimpleMap extends React.Component {
	state = {
	center: [60.938043, 30.337157],
	zoom: 9,
	};

	_onChange = ({center, zoom}) => {
	this.setState({
	center: center,
	zoom: zoom,
	});
	}


	_onGoogleApiLoaded = ({map, maps}) =>
	{
	_displayCoordinates = (pnt) => {
	var holder = document.getElementById('holder-coordinates-display');
	holder.style.visibility = "visible";

	var lat = pnt.lat();
	lat = lat.toFixed(4);
	var lng = pnt.lng();
	lng = lng.toFixed(4);
	holder.innerHTML = "Latitude: " + lat + " Longitude: " + lng;
	}

	_centerControl = (controlDiv, map, initialLat, initialLng) => {
	var controlUI = document.createElement('div');
	controlUI.id = 'holder-coordinates-display';
	controlUI.style.backgroundColor = '#fff';
	controlUI.style.border = '2px solid #fff';
	//controlUI.style.borderRadius = '3px';
	controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
	controlUI.style.marginBottom = '0px';
	controlUI.style.marginLeft = '0px';
	controlUI.style.textAlign = 'center';
	controlUI.style.minWidth = '100px';
	controlUI.style.visibility = "hidden"
	controlUI.style.color = 'rgb(25,25,25)';
	controlUI.style.fontFamily = 'Roboto,Arial,sans-serif';
	controlUI.style.fontSize = '12px';
	controlUI.style.lineHeight = '18px';
	controlUI.style.minHeight = '18px';
	controlUI.style.paddingLeft = '5px';
	controlUI.style.paddingRight = '5px';

	controlDiv.appendChild(controlUI);
	}

	// Create the DIV to hold the control and call the CenterControl()
	// constructor passing in this DIV.
	var centerControlDiv = document.createElement('div');
	var centerControl = new _centerControl(centerControlDiv, map);

	centerControlDiv.index = 1;
	map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

	maps.event.addListener(map, 'mousemove', function (event) {
	_displayCoordinates(event.latLng);
	});
	}

	render() {
	return (
	<GoogleMapReact
	onChange={this._onChange}
	center={this.state.center}
	zoom={this.state.zoom}
	onGoogleApiLoaded={this._onGoogleApiLoaded}
	yesIWantToUseGoogleMapApiInternals={true}
	>
	</GoogleMapReact>
	);
	}
	}


	ReactDOM.render(
	<div style={{width: '100%', height: 400}}>
	<SimpleMap/>
	</div>,
	document.getElementById('main')
	);
	</script></body>
	</html>