Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React GoogleMap Example
<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>
@sahat

This comment has been minimized.

Copy link

sahat commented Feb 7, 2015

❗️ Note for React >= 0.9

Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling this.getDOMNode().

In other words, replace rootNode parameter with this.getDOMNode() in the latest version of React.

@milieu

This comment has been minimized.

Copy link

milieu commented Feb 22, 2015

Thank you @sahat. This was key.

@victor-axelsson

This comment has been minimized.

Copy link

victor-axelsson commented Feb 11, 2016

If your rootNode is undefinied you can use refs instead.

<div className='map' style={style} ref="mapRef"></div>
let rootNode = this.refs.mapRef; 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.