Skip to content

Instantly share code, notes, and snippets.

@maedhr

maedhr/gist:8823168

Created February 5, 2014 13:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maedhr/8823168 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maedhr/8823168 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. maedhr created this gist Feb 5, 2014.
    69 changes: 69 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <html>
    <head>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" ></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
    <script type='text/jsx'>
    /** @jsx React.DOM */
    ExampleGoogleMap = React.createClass({
    getDefaultProps: function () {
    return {
    initialZoom: 15,
    mapCenterLat: 43.6425569,
    mapCenterLng: -79.4073126,
    };
    },

    componentDidMount: function (rootNode) {
    var mapOptions = {
    center: this.mapCenterLatLng(),
    zoom: this.props.initialZoom
    },
    map = new google.maps.Map(rootNode, mapOptions);

    this.setState({map: map});
    },

    mapCenterLatLng: function () {
    var props = this.props;

    return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng);
    },

    componentDidUpdate: function () {
    var map = this.state.map;

    map.panTo(this.mapCenterLatLng());
    },

    render: function () {
    var style = {
    width: '500px',
    height: '500px'
    };

    return (
    <div className='map' style={style}></div>
    );
    }
    });

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

    setTimeout(function() {
    React.renderComponent(
    <ExampleGoogleMap mapCenterLat={43.6422125} mapCenterLng={-79.3744257} />,
    $('body')[0]
    );
    }, 5000);
    });
    </script>
    </head>
    <body>
    </body>
    </html>