React and Google Maps

Example React & Google Maps

by Juan Sebastian Faccio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<script src="https://rawgithub.com/istarkov/google-map-react/master/lib/umd/GoogleMapReact.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

var K_WIDTH = 20;
var K_HEIGHT = 20;

var greatPlaceStyle = {
    position: 'absolute',
    width: K_WIDTH,
    height: K_HEIGHT,
    left: -K_WIDTH / 2,
    top: -K_HEIGHT / 2,
    border: '5px solid #f44336',
    borderRadius: K_HEIGHT,
    backgroundColor: 'white',
    textAlign: 'center',
    color: '#3f51b5',
    fontSize: 16,
    fontWeight: 'bold',
    padding: 4
};

var MyGreatPlace =  React.createClass({
    render: function() {
        return (
            <div style={greatPlaceStyle}>
                {this.props.text}
            </div>
        );
    }
}); 


var Map = React.createClass({
    render: function() {
        return (
            <div style={{height: 400}}>
                <GoogleMapReact
                    center={this.props.center}
                    zoom={this.props.zoom}>
                    <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'}/>
                    <MyGreatPlace lat={59.724465} lng={30.080121} text={'B'} />
                </GoogleMapReact>
            </div>
        );
    }
});
 
React.render(<Map center={[59.938043, 30.337157]} zoom={9} />, document.getElementById('container'));