Skip to content

Instantly share code, notes, and snippets.

@theorigin

theorigin/index.html

Created February 22, 2017 23:34
Show Gist options
  • Save theorigin/3da5a85c135a705265b559a53f3c6d8d to your computer and use it in GitHub Desktop.
Save theorigin/3da5a85c135a705265b559a53f3c6d8d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/disiboc
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/[email protected]/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>
Raw
jsbin.disiboc.css
.place{
width: 40px;
padding: 20px;
border: 1px solid blue;
background: red;
color: yellow;
}
Raw
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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment