Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
React GoogleMap Example
<script src="" ></script>
<script src=""></script>
<script src=""></script>
<script src=""></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 =;
render: function () {
var style = {
width: '500px',
height: '500px'
return (
<div className='map' style={style}></div>
$(function() {
<ExampleGoogleMap />,
setTimeout(function() {
<ExampleGoogleMap mapCenterLat={43.6422125} mapCenterLng={-79.3744257} />,
}, 5000);

This comment has been minimized.

Copy link

@sahat 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.


This comment has been minimized.

Copy link

@milieu milieu commented Feb 22, 2015

Thank you @sahat. This was key.


This comment has been minimized.

Copy link

@victor-axelsson 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