{"action":"created","issue":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/860","repository_url":"https://api.github.com/repos/tomchentw/react-google-maps","labels_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/860/labels{/name}","comments_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/860/comments","events_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/860/events","html_url":"https://github.com/tomchentw/react-google-maps/issues/860","id":335524949,"node_id":"MDU6SXNzdWUzMzU1MjQ5NDk=","number":860,"title":"Custom Zoom Control UI","user":{"login":"rockia","id":1174101,"node_id":"MDQ6VXNlcjExNzQxMDE=","avatar_url":"https://avatars2.githubusercontent.com/u/1174101?v=4","gravatar_id":"","url":"https://api.github.com/users/rockia","html_url":"https://github.com/rockia","followers_url":"https://api.github.com/users/rockia/followers","following_url":"https://api.github.com/users/rockia/following{/other_user}","gists_url":"https://api.github.com/users/rockia/gists{/gist_id}","starred_url":"https://api.github.com/users/rockia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rockia/subscriptions","organizations_url":"https://api.github.com/users/rockia/orgs","repos_url":"https://api.github.com/users/rockia/repos","events_url":"https://api.github.com/users/rockia/events{/privacy}","received_events_url":"https://api.github.com/users/rockia/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-06-25T18:49:59Z","updated_at":"2018-07-03T23:34:45Z","closed_at":null,"author_association":"NONE","body":"Hello, this is the first time I am opening issue in this project. I have a question regarding adding custom control. \r\nHere is my environment: \r\n\r\n- **\"react-google-maps\": \"^9.4.5\"**\r\n- **\"react\": \"^16.3.2\"**\r\n- **\"react-dom\": \"^16.3.2\"**\r\n\r\nUpon some googling and stackoverflow searching. I have found some good references:\r\nFor example: \r\n- https://jsfiddle.net/maunovaha/jptLfhc8/\r\n- https://developers.google.com/maps/documentation/javascript/examples/control-custom \r\n\r\nHowever, I don't think the `.controls` are in the `google.maps` object.\r\n\r\nFollowing is my code:\r\n\r\n```javascript\r\nclass MapComponent extends Component {\r\nconstructor(props){\r\n    super(props);\r\n    this.mapComponentRef = React.createRef();\r\n  }\r\n\r\n  render(){\r\n      return (\r\n      <GoogleMap\r\n        ref={this.mapComponentRef}\r\n      />);\r\n  }\r\n}\r\n```\r\n\r\nI can confirm that I can access the ref of the map. For example, I use \r\n```javascript\r\nthis.mapComponentRef.current.fitBounds(this.bounds);\r\n```\r\nto update the bounds of the map and it works.\r\n\r\nHowever, when I try to do `this.mapComponentRef.current.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv)`, it gives me errors that the `controls` is undefined.\r\n\r\nDoes anyone has pointer on how to get access the `controls` so I can push my custom component to control the zoom level of the map?"},"comment":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/comments/402320808","html_url":"https://github.com/tomchentw/react-google-maps/issues/860#issuecomment-402320808","issue_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/860","id":402320808,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMjMyMDgwOA==","user":{"login":"rockia","id":1174101,"node_id":"MDQ6VXNlcjExNzQxMDE=","avatar_url":"https://avatars2.githubusercontent.com/u/1174101?v=4","gravatar_id":"","url":"https://api.github.com/users/rockia","html_url":"https://github.com/rockia","followers_url":"https://api.github.com/users/rockia/followers","following_url":"https://api.github.com/users/rockia/following{/other_user}","gists_url":"https://api.github.com/users/rockia/gists{/gist_id}","starred_url":"https://api.github.com/users/rockia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rockia/subscriptions","organizations_url":"https://api.github.com/users/rockia/orgs","repos_url":"https://api.github.com/users/rockia/repos","events_url":"https://api.github.com/users/rockia/events{/privacy}","received_events_url":"https://api.github.com/users/rockia/received_events","type":"User","site_admin":false},"created_at":"2018-07-03T23:34:45Z","updated_at":"2018-07-03T23:34:45Z","author_association":"NONE","body":"Thanks @AonanLi for your reply. I tried it but still couldn't get it working. I see same error that I can't read property 'context' of null. \r\n\r\n<img width=\"1046\" alt=\"screen shot 2018-07-03 at 4 31 03 pm\" src=\"https://user-images.githubusercontent.com/1174101/42249178-b08c32e4-7ede-11e8-8ade-1d961912dbf3.png\">\r\n\r\nHere is how I call this custom control. It should be aligned with what you provided.\r\n\r\n```\r\n<CustomControl\r\n         mapHolderRef={this.mapComponentRef}\r\n          controlPosition={window.google.maps.ControlPosition.BOTTOM_RIGHT}\r\n        >\r\n          <div onClick={() => this.mapComponentRef.current.map.setZoom(8)}>testing component</div>\r\n        </CustomControl>\r\n```"}}
{"actor":{"display_login":"rockia"}}