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@1.0.1/dist/GoogleMapReact.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="main"></div>
</body>
</html>
 
const AnyReactComponent = ({ text }) => (
  <div style={{
    color: 'white', 
    background: 'grey',
    padding: '15px 10px',
    display: 'inline-flex',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '100%',
    transform: 'translate(-50%, -50%)'
  }}>
    {text}
  </div>
);
​
class SimpleMap extends React.Component {
  static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };
​
  render() {
    return (
     <div className="results__map-handler" style={{width: '100%', height: '100vh'}}>
       <GoogleMapReact
         defaultCenter={{lat: 59.95, lng: 30.33}}
         defaultZoom={11}
         bootstrapURLKeys={{key: ''}}
      >
        <AnyReactComponent 
             lat={59.955413}
             lng={30.337844}
             text={'MY MARKER'}
        />
      </GoogleMapReact>
      </div>
    );
  }
}
​
ReactDOM.render(
    <SimpleMap/>,
  document.getElementById('main')
);
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers