Google Map React

by jamesdh

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

CSS

.map-gic {
    height: 500px;
    width: 500px
}
body{
    width: 500px;
    height: 500px;
}

JavaScript 1.7

/** @jsx React.DOM */

var ExampleGoogleMap = React.createClass({  
    getDefaultProps: function () {
        return {
            initialZoom: 8,
            mapCenterLat: 43.6425569,
            mapCenterLng: -79.4073126,
        };
    },
    componentDidMount: function (rootNode) {
        var mapOptions = {
            center: this.mapCenterLatLng(),
            zoom: this.props.initialZoom
        },
        map = new google.maps.Map(this.getDOMNode(), mapOptions);
        var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map});
        this.setState({map: map});
    },
    mapCenterLatLng: function () {
        var props = this.props;
        return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng);
    },
    render: function () {
        return (
        	<div className='map-gic'></div>
        );
    }
});

 
	React.renderComponent(  
	    <ExampleGoogleMap />,$('body')[0]
	);