{"action":"opened","issue":{"url":"https://api.github.com/repos/istarkov/google-map-react/issues/243","repository_url":"https://api.github.com/repos/istarkov/google-map-react","labels_url":"https://api.github.com/repos/istarkov/google-map-react/issues/243/labels{/name}","comments_url":"https://api.github.com/repos/istarkov/google-map-react/issues/243/comments","events_url":"https://api.github.com/repos/istarkov/google-map-react/issues/243/events","html_url":"https://github.com/istarkov/google-map-react/issues/243","id":177642370,"number":243,"title":"google undefined","user":{"login":"mxmtsk","id":4848184,"avatar_url":"https://avatars.githubusercontent.com/u/4848184?v=3","gravatar_id":"","url":"https://api.github.com/users/mxmtsk","html_url":"https://github.com/mxmtsk","followers_url":"https://api.github.com/users/mxmtsk/followers","following_url":"https://api.github.com/users/mxmtsk/following{/other_user}","gists_url":"https://api.github.com/users/mxmtsk/gists{/gist_id}","starred_url":"https://api.github.com/users/mxmtsk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mxmtsk/subscriptions","organizations_url":"https://api.github.com/users/mxmtsk/orgs","repos_url":"https://api.github.com/users/mxmtsk/repos","events_url":"https://api.github.com/users/mxmtsk/events{/privacy}","received_events_url":"https://api.github.com/users/mxmtsk/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-09-18T09:48:54Z","updated_at":"2016-09-18T09:48:54Z","closed_at":null,"body":"Hello,\r\n\r\nI'm trying to get a Google Maps Searchbox to work, but i keep getting \"google is undefined\". Am I missing something here? I thought it was possible to access the google maps api.\r\nI'm using react-starter-kit and my component looks like this:\r\n\r\nMap Component:\r\n```Javascript\r\nimport React, { Component, PropTypes } from 'react';\r\nimport { connect } from 'mobx-connect';\r\nimport shouldPureComponentUpdate from 'react-pure-render/function';\r\nimport GoogleMap from 'google-map-react';\r\nimport ScoutMapOptions from './ScoutMapOptions';\r\nimport ScoutMapAutocomplete from '../../components/ScoutMapAutocomplete/ScoutMapAutocomplete';\r\n\r\nclass Scout extends Component {\r\n  shouldComponentUpdate = shouldPureComponentUpdate\r\n\r\n  render() {\r\n    const { state } = this.context;\r\n    return (\r\n      <div>\r\n        <div className=\"scout-results\">\r\n          <div className=\"scout-filter-bar\">\r\n            <div className=\"scout-filter-collapse\">\r\n\r\n              <form method=\"post\" action=\"\">\r\n\r\n                {/* Location */}\r\n                <div className=\"scout-filter\">\r\n                  <ScoutMapAutocomplete\r\n                    className=\"form-control\"\r\n                    placeholder=\"| Where\"\r\n                    // onPlacesChanged={this.onPlacesChanged}\r\n                  />\r\n                </div>\r\n\r\n                <div className=\"scout-filter\">\r\n                  <input type=\"submit\" className=\"button button-block\" value=\"Search\" />\r\n                </div>\r\n\r\n              </form>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          {/* Map */}\r\n          <div className=\"scout-map\">\r\n            <GoogleMap\r\n              center={state.center}\r\n              zoom={state.zoom}\r\n              options={ScoutMapOptions}\r\n            >\r\n            </GoogleMap>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default connect(Scout);\r\n```\r\n\r\nMap Autocomplete Component:\r\n```Javascript\r\nimport React, { Component, PropTypes } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nexport default class MapAutocomplete extends Component {\r\n  static propTypes = {\r\n    placeholder: PropTypes.string,\r\n    onPlacesChanged: PropTypes.func\r\n  }\r\n\r\n  constructor(props) {\r\n    super(props);\r\n  }\r\n\r\n  componentDidMount() {\r\n    const input = ReactDOM.findDOMNode(this.refs.input);\r\n\r\n    this.searchBox = new google.maps.places.SearchBox(input);\r\n    this.searchBox.addListener('places_changed', this.onPlacesChanged);\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    // this.searchBox.removeListener('places_changed', this.onPlacesChanged);\r\n  }\r\n\r\n  onPlacesChanged = () => {\r\n    if (this.props.onPlacesChanged) {\r\n      this.props.onPlacesChanged(this.searchBox.getPlaces());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return <input ref=\"input\" {...this.props} type=\"text\"/>;\r\n  }\r\n}\r\n```\r\n\r\nThanks for you help!\r\n"}}
{"actor":{"display_login":"mxmtsk"}}