import React from 'react';
import Map, {GoogleApiWrapper} from 'google-maps-react';

import { searchNearby } from 'utils/googleApiHelpers';

export class Container extends React.Component {
	constructor(props) {
		// super initializes this
		super(props);

		this.state = {
			places: [],
			pagination: null
		}
	}
	onReady(mapProps, map) {
		// when map is ready 
		const { google } = this.props;
		const opts = {
			location: map.center,
			radius: '500',
			types: ['cafe']
		}
		searchNearby(google, map, opts)
			.then((results, pagination) => {
				// we got some results and a pagination object
				this.setState({
					places: results,
					pagination
				})
			}).catch((status, result) => {
				// there was an error
			})
	}
	render() {
		return (
			<div>
				<Map 
					onReady={this.onReady.bind(this)}
					google={this.props.google} 
					visible={false} >

					{this.state.places.map(place => {
						return (<div key={place.id}>{place.name}</div>)
					})}

				</Map>
			</div>
		)
	}
}

export default GoogleApiWrapper({
	apiKey: __GAPI_KEY__
})(Container);
import React from 'react';
import Map, {GoogleApiWrapper} from 'google-maps-react';

import { searchNearby } from 'utils/googleApiHelpers';

export class Container extends React.Component {
	onReady(mapProps, map) {
		// when map is ready and 
		const { google } = this.props;
		const opts = {
			location: map.center,
			radius: '500',
			types: ['cafe']
		}
		searchNearby(google, map, opts)
			.then((results, pagination) => {
				// we got some results and a pagination object
			}).catch((status, result) => {
				// there was an error
			})
	}
	render() {
		return (
			<div>
				<Map 
					onReady={this.onReady.bind(this)}
					google={this.props.google} />
			</div>
		)
	}
}

export default GoogleApiWrapper({
	apiKey: __GAPI_KEY__
})(Container);
--- 
+++ 
@@ -4,8 +4,17 @@
 import { searchNearby } from 'utils/googleApiHelpers';
 
 export class Container extends React.Component {
+	constructor(props) {
+		// super initializes this
+		super(props);
+
+		this.state = {
+			places: [],
+			pagination: null
+		}
+	}
 	onReady(mapProps, map) {
-		// when map is ready and 
+		// when map is ready 
 		const { google } = this.props;
 		const opts = {
 			location: map.center,
@@ -15,6 +24,10 @@
 		searchNearby(google, map, opts)
 			.then((results, pagination) => {
 				// we got some results and a pagination object
+				this.setState({
+					places: results,
+					pagination
+				})
 			}).catch((status, result) => {
 				// there was an error
 			})
@@ -24,7 +37,14 @@
 			<div>
 				<Map 
 					onReady={this.onReady.bind(this)}
-					google={this.props.google} />
+					google={this.props.google} 
+					visible={false} >
+
+					{this.state.places.map(place => {
+						return (<div key={place.id}>{place.name}</div>)
+					})}
+
+				</Map>
 			</div>
 		)
 	}
Set Main container to be stateful
