Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
</head>
<body>
  <div id="main"></div>
</body>
</html>
 
.place{  
  width: 40px;
  padding: 20px;
  border: 1px solid blue;
  background: red;
  color: yellow; 
}
 
class SimpleMap extends React.Component {
  state = {
    center: [60.938043, 30.337157],
    zoom: 9,
  };
​
  _onChange = ({center, zoom}) => {
    this.setState({
      center: center,
      zoom: zoom,      
    });
  }
​
  render() {
    return (
       <GoogleMapReact
        onChange={this._onChange}
        center={this.state.center}
        zoom={this.state.zoom}>
        <div className="place" lat={60.955413} lng={30.337844}>MyPlace</div>
      </GoogleMapReact>
    );
  }
}
​
​
ReactDOM.render(
  <div style={{width: '100%', height: 400}}>
    <SimpleMap/>
  </div>,
  document.getElementById('main')
);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers